基于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;
});
});