layui树形组件获取复选框选中的id,禁用选中父节点后自动选中子节点功能

最新推荐文章于 2025-09-11 02:24:09 发布

原创最新推荐文章于 2025-09-11 02:24:09 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #前端

技术专栏收录该内容

47 篇文章

订阅专栏

该博客介绍了在项目中遇到的一个问题：当使用Tree组件并获取选中ID后，由于ID包含父节点，导致回显时父节点选中，其子节点也随之被选中。博主提出了解决方案，通过在layuitree的oncheck事件中禁用选中父节点后自动选中子节点的功能。具体做法是在oncheck事件中遍历并取消所有子节点的选中状态，然后演示了如何设置和获取选中节点的ID，以及递归遍历获取所有选中节点的ID。

在项目中，tree组件获取选中id后，id也包涵了父节点，回显的时候，父节点选中，子节点也全部选中的问题，以下简单的方法，用oncheck

禁用选中父节点后自动选中子节点功能，可以再layui tree 的oncheck事件里进行更改即可。

    //开启复选框
                tree.render({
                  elem: '#test7'
                  , id: 'demoId1'
                  , data: result
                  , showCheckbox: true
                  , oncheck: function (obj) {
                    var childs = $(obj.elem).find('.' + "layui-tree-pack").find('input[same="layuiTreeCheck"]');
                    childs.each(function () {
                      this.checked = false;
                    });
                    form.render('checkbox');
                  }
                });
		tree.setChecked('demoId1', ['1', '11']); //勾选指定节点，1是父节点id，11是子节点。
		
	//选中节点id，包涵了父id
	 var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据，demoId1在tree定义一个id
              console.log("111", checkedData)
              var arrId = []
              getCheckedId(checkedData);
              // 测试
              console.log(arrId);
              // 获取选中节点的id,遍历树形列表去获取每一级的id
              function getCheckedId(jsonObj) {
                jsonObj.forEach((item, index) => {
                  arrId.push(item.id)
                  if (item.children != []) {
                    getCheckedId(item.children);//递归实现遍历每一层级数据
                  }
                });
                return arrId;
              }