分享一下tree 树形多选操作

分享 未结 12 4084
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.如果不知道怎么改的话,移步码云
回帖
  • [good]
    0 回复
  • AggerChen
    2017-9-15
    码云地址
    http://git.oschina.net/Agger/codes/4sk5qrgelhy9w7b2v8uoz100#0-sqq-1-12319-9737f6f9e09dfaf5d3fd14d775bfee85
    0 回复
  • 我的评论是最刁的!


    0 回复
  • swocn
    2017-9-15
    支持一下,我暂时是用ztree来组合着用的,就是风格有点不合,但功能实现方便些
    0 回复
  • shmilylee
    2017-9-16
    就喜欢这种爱自己动手又愿意分享出来的精神
    0 回复
  • http
    2017-9-17
    请问如何给checkbox添加选中触发事件,像如此点击事件样click: function(li, item){console.log($tree.getChecked());}
    0 回复
  • AggerChen
    2017-9-18
    @http 很简单嘛,在我更改的tree.js中,新增这样一句话就可以了

    然后在前端初始化tree的时候,配置自定义选中回调checkedFun
    $tree = layui.tree({
    elem: '#demo',
    check:"checkbox",
    nodes: data,
    click: function(node){

    },
    checkedFun:function(li,elem,item){
    //选中节点回调
    cosole.log(li); //所有子节点
    cosole.log(elem); //当前节点
    cosole.log(item); //当前节点的data

    }
    });
    0 回复
  • AggerChen
    2017-9-18
    @swocn 嗯 期待贤心的下次更新咯[哈哈]
    0 回复
  • MrBigD
    2017-9-21
    [good] ,解燃眉之急
    0 回复
  • ThePeak
    2017-11-1
    楼主的前端如果渣的话,我们这种就会jquery的就渣成沫了
    0 回复
本帖已设置禁止回复