分享一下tree 树形多选操作

分享 未结 12 4815
AggerChen
AggerChen 2017-9-15
悬赏:10飞吻
tree组件暂时还没有支持多选和单选,但是为了项目中有的地方确实需要,所以就想办法去研究了一下。发现贤心,tree组件里其实有做单选多选打算的,可能是时间原因暂时还未完成。本人后台开发,前端渣渣,在tree基础上做了一些修改,让他支持了多选,并方便的获取多选。由于时间关系,单选还没有实现,但是相对简单,有机会再做了。


操作:
1.不建议直接在源码中更改,所以建议更改名称单独引用。
2.Tree.prototype.tree方法中新增that.check(li, item);

3.新增两个内置方法Tree.prototype.check和Tree.prototype.getChecked
//自定义 选择节点
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;
};
4.在暴露接口的地方返回tree




5.源码的更改就完成了。接下来时如何使用:
var $tree = layui.tree({
elem: '#demo',
check:"checkbox",
nodes: data,
});

$tree.getChecked(); //获取最后选择的节点 数组形式

6.这样能满足自己的需要,要稳定或功能更全的就只有等官方咯,辛苦了贤心。
7.如果不知道怎么改的话,移步码云
回帖
本帖已设置禁止回复