首页 > 编程知识 正文

layui树形数据获取,layui图标变成方格

时间:2023-05-04 05:18:01 阅读:116017 作者:389

基于layui-tree源代码定制了选择多个yjfdjm方法

//*

@Name:layui.tree树组件

@Author :贤心

@许可证: MIT

layui.define(jquery ),function ) (exports )

' use strict ';

var $=layui.$

,hint=layui.hint (;

var enterSkin='layui-tree-enter ',tree=function{

this.options=options;

(;

//图标

var icon={

arrow: [' ' '、' ' ]//箭头

、checkbox: [' ' '、' ' ]//复选框

、radio: [' ' '、' ' ]//选择框

、branch: [' ' '、' ' ]//父亲yjfdjm

、leaf: '' //叶yjfdjm

(;

//初始化

tree.prototype.init=function{

var that=this;

elem.add class (la yui-boxlayui-tree ); 添加树样式

if(that.options.skin ) {

elem.add class (la yui-tree-skin-' that.options.skin );

}

that.tree(Elem;

that.on(Elem );

(;

//树yjfdjm分析

tree.prototype.tree=function{

var that=this,options=that.options

var nodes=children|| options.nodes;

layui.each(nodes,function ) index,item ) )

varhaschild=item.children item.children.length 0;

var ul=$ (' );

varLi=$([ '

'

//展开箭头

,function () }

return hasChild? ' ' (item.spread? icon.arrow [1] : icon.arrow [0] ) ' ' : ' ';

() ) ) )

//复选框/一个选择框

,function () }

return options.check? (

(: );

() ) ) )

//yjfdjm

,function () }

//****自定义替换name开始

var name=item.name;

if(that.options.replacename ) name=item [ that.options.replace name ];

//****自定义替换name退出

return ' '轻松的绿草(hasChild? (item.spread? icon.branch [1] : icon.branch [0] (: icon.leaf (' )//yjfdjm图标的轻绿草(name|| (未命名) ) ) )

() ) ) )

、' ' ].join (' ' );

//如果有子yjfdjm,则继续递归生成树

if (隐藏) {

Li.append(ul;

that.tree(ul,item.children );

}

Elem.append(Li;

点击yjfdjm外向歌曲的触发器

type of options.click===' function ' that.click (Li,item );

发展yjfdjm

that.spread(Li,item );

选择yjfdjm

that.check(Li,item );

拖动yjfdjm

options.drag

amp; that.drag(li, item);

});

};

//点击yjfdjm外向的歌曲

Tree.prototype.click = function(elem, item){

var that = this, options = that.options;

elem.children('a').on('click', function(e){

layui.stope(e);

options.click(item,elem);

});

};

//伸展yjfdjm

Tree.prototype.spread = function(elem, item){

var that = this, options = that.options;

var arrow = elem.children('.layui-tree-spread')

var ul = elem.children('ul'), a = elem.children('a');

//执行伸展

var open = function(){

if(elem.data('spread')){

elem.data('spread', null)

ul.removeClass('layui-show');

arrow.html(icon.arrow[0]);

a.find('.layui-icon').html(icon.branch[0]);

} else {

elem.data('spread', true);

ul.addClass('layui-show');

arrow.html(icon.arrow[1]);

a.find('.layui-icon').html(icon.branch[1]);

}

};

//如果没有子yjfdjm,则不执行

if(!ul[0]) return;

arrow.on('click', open);

a.on('dblclick', open);

}

//*****自定义 选择yjfdjm

Tree.prototype.check = function(elem, item){

var that = this, options = that.options;

var checkbox = elem.children('.layui-tree-check');

var li = elem.find('ul li'),licheckbox = elem.find('ul li .layui-tree-check');

//执行选择

var check = function(){

if(elem.data('checked')){//默认选中

li.data('checked', null);

elem.data('checked', null);

item.checked = null;

eachChildren(item,null);

checkbox.html(icon.checkbox[0]);

licheckbox.html(icon.checkbox[0]);

} else {//默认不选中

li.data('checked', true);

elem.data('checked', true);

item.checked = true;

eachChildren(item,true);

checkbox.html(icon.checkbox[1]);

licheckbox.html(icon.checkbox[1]);

}

};

var eachChildren = function(item,value){

layui.each(item.children,function(index,it){

it.checked = value;

eachChildren(it,value);

});

}

//如果没有设置check,则不执行

if(!options.check) return;

checkbox.on('click', check);

}

//****自定义 返回选中外向的歌曲

Tree.prototype.getChecked = function(node){

var that = this;

var nodes = node||that.options.nodes;

var checkedArr = [];

layui.each(nodes, function(index, item){

if(item.checked!=null&&item.checked){

checkedArr.push(item);

}

if(item.children!=null&&item.children.length>0){

checkedArr = checkedArr.concat(that.getChecked(item.children));

}

});

return checkedArr;

};

//通用事件

Tree.prototype.on = function(elem){

var that = this, options = that.options;

var dragStr = 'layui-tree-drag';

//屏蔽选中文字

elem.find('i').on('selectstart', function(e){

return false

});

//拖拽

if(options.drag){

$(document).on('mousemove', function(e){

var move = that.move;

if(move.from){

var to = move.to, treeMove = $('');

e.preventDefault();

$('.' + dragStr)[0] || $('body').append(treeMove);

var dragElem = $('.' + dragStr)[0] ? $('.' + dragStr) : treeMove;

(dragElem).addClass('layui-show').html(move.from.elem.children('a').html());

dragElem.css({

left: e.pageX + 10

,top: e.pageY + 10

})

}

}).on('mouseup', function(){

var move = that.move;

if(move.from){

move.from.elem.children('a').removeClass(enterSkin);

move.to && move.to.elem.children('a').removeClass(enterSkin);

that.move = {};

$('.' + dragStr).remove();

}

});

}

};

//拖拽yjfdjm

Tree.prototype.move = {};

Tree.prototype.drag = function(elem, item){

var that = this, options = that.options;

var a = elem.children('a'), mouseenter = function(){

var othis = $(this), move = that.move;

if(move.from){

move.to = {

item: item

,elem: elem

};

othis.addClass(enterSkin);

}

};

a.on('mousedown', function(){

var move = that.move

move.from = {

item: item

,elem: elem

};

});

a.on('mouseenter', mouseenter).on('mousemove', mouseenter)

.on('mouseleave', function(){

var othis = $(this), move = that.move;

if(move.from){

delete move.to;

othis.removeClass(enterSkin);

}

});

};

//暴露接口

exports('tree', function(options){

var tree = new Tree(options = options || {});

var elem = $(options.elem);

if(!elem[0]){

return hint.error('layui.tree 没有找到'+ options.elem +'元素');

}

tree.init(elem);

return tree;

});

});

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。