layui.tree树形回调动态设置父子节点半勾选,不改源码解决设置父节点导致所有子节点都勾选问题,取消关联

三更:因为回调+半选的原因,换技术了 http://www.wisdomelon.com/DTreeHelper/

 支持回调  半选  全选  单选级联  等需求


二更:老老实实的都保存数据,查询的时候多做点文章,只要最子节点的(下面没有children的),再回调给前端,就能放出来。

仅保存子级弊端很明显,其实少数据。在使用时候,会导致父级模块都没有勾选,却拥有增删改查权限(尴尬.....)

 


 

思路:从数据上解决,保存时/ 回调 数据都是最子级的勾选,至于父级勾选交给layui

只是解决回调问题,如果判断路径或者模块权限,则不适用

只是解决回调问题,如果判断路径或者模块权限,则不适用

只是解决回调问题,如果判断路径或者模块权限,则不适用

(版本layui-v2.5.6)

 

问题:

假设我勾选了一个3    通过 官方文档树形组件文档 - layui.tree

tree.render({
  elem: '#test'
  ,data: [] //数据源
  ,id: 'demoId' //定义索引
});
 
//获得选中的节点
var checkData = tree.getChecked('demoId');

这个获取的都是一个嵌套的树状数据,需要自己写一个迭代。

(如果需要获取所有勾选的ID迭代代码,请看https://blog.csdn.net/qq_16513911/article/details/106281179

通过获取所有的方法,拿到ID 【1,2,3】

然后我再通过官方文档中

tree.setChecked('demoId', [1,2, 3]); //批量勾选 id 为 2、3 的节点

设置回调【1,2,3】,会变成下面的效果

为了避免勾选了父级别,导致下面的全选,我尝试仅回调 【3】 是可以的

 


so......看看怎么保存子级,主要是修改了迭代方法,仅获取勾选的子级

当我勾选了三个查看【第3.6.10】按钮,获取的内容是三个ID


         //声明一个对象            
         var obj = new Object();
         obj.id=10;
         var checkedData = tree.getChecked('menu1'); //获取选中节点的数据
         var nodeIds = new Array();
         nodeIds = getCheckedId(checkedData);
         nodeIds=nodeIds.split(","); //字符分割
         obj.menuId = nodeIds;
        //经过以上一波操作,封装了一个对象,里面包含了ID和树状最子级集合



        // 获取选中节点的id
        function getCheckedId(jsonObj) {
            var id = "";
            $.each(jsonObj, function (index, item) {
                var i;
                if (item.children == null) {
                        id = item.id;
                }else{
                    i= getCheckedId(item.children);
                }
                if (i != null&&id!="") {
                    id = id + "," + i;
                }else if(i != null){
                    id =  i;
                }
            });
            return id;
        }

保存在库里的时候就三个字段,通过回调【3.6.10】,父级自动勾选。就达到效果了。

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值