layui树形组件获取复选框选中的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;
              }
              
树形控件中的多框通常会有一个“全”或“取消全”的功能,当禁用这个多框时,用户无法手动择所有的节点。如果你希望在禁用状态下仍然保留某个默认已选中节点,可以采取以下步骤: 1. **初始化状态**:在控件加载时或者设置默认选中状态时,对需要显示默认选中节点进行标记。 2. **禁止操作**:设置多框的`enabled`属性为`false`,阻止用户手动择或取消择。 3. **隐藏或替换UI元素**:如果禁用状态下默认选中的样式不理想,你可以考虑隐藏原来的复选框,然后添加一个静态图标或者其他视觉提示,表明该节点已被预。 4. **单独处理程序**:为那个默认选中节点编写独立的操作方法,使其始终保持选中状态,用户交互只影响其他可节点。 例如,JavaScript 示例(假设使用的是jQuery UI的Treeview插件): ```javascript $(function() { // 初始化并设置默认选中节点 var defaultNode = $('#treeId').treeview('getSelected', { silent: true })[0]; // 禁用框 $('#checkboxId').prop('disabled', true); // 保持默认节点选中 function maintainDefaultSelection() { if (defaultNode) { $(defaultNode).attr('selected', 'selected'); } } // 当用户交互改变节点时更新默认状态 $('#treeId').on('selectItem.jqtree', function(event, data) { maintainDefaultSelection(); }); // 初始化时就应用默认选中状态 maintainDefaultSelection(); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值