禁用layui树形表格的多选框checkbox

1. 背景

在使用树形表格渲染数据时，需要对数据进行批量操作。相对于选中数据后，再做错误提示。直接把数据的多选框禁用掉更加直观。

2. 实现

     DisabledTableCheckBox: () => {
         // 获取所有行 
         var tableElem = $(".layui-table-fixed-l");
         var rows = tableElem.find('tr');
         for (var i = 1; i < rows.length; i++) {
             var row = rows[i];
             // 检查行是否包含非根节点的标志（例如，parentId不为空）
             if (row.getAttribute('data-level') == 0) {
                 // 找到行内的checkbox
                 var checkbox = row.querySelector('input[type="checkbox"]');
                 // 禁用checkbox 
                 checkbox.setAttribute("disabled", true);
                 row.setAttribute("title", "根节点不能审核！");
                 // 可以添加类来改变外观，表明它被禁用了
                 checkbox.classList.add('layui-disabled');
             }
         }

     }// 渲染表格 

调用点

                tableRender: function () {
                    var self = this;
                    treeTable.render({
                        elem: "#WorkList",
                        limit: 100000,
                        cols: [[ //标题栏
                            { type: "numbers", fixed: 'left' },
                            { type: "checkbox", fixed: 'left', },

                        ]],
                        tree: {
                            customName: {
                                children: "ChildList",
                                name: "Name"
                            },
                            data: {
                                rootPid: "10",
                                cascade: "none"
                            },
                            callback: {
                                onExpand: function () {
                                    format.init();
                                    self.DisabledTableCheckBox();//调用点
                                }
                            }
                        },
                        done: function (res) {
                            format.init();

                            $(".expandAll").on("click", function () {
                                treeTable.expandAll("WorkList", true);
                                format.init();
                                self.DisabledTableCheckBox();//调用点
                            })
                            $(".foldAll").on("click", function () {
                                treeTable.expandAll("WorkList", false);
                                format.init();
                            });
                        }
                    });

3. 效果图

父节点被禁用，

4. 总结

在对以上代码实现过程中，遇到的两个问题。

1. layui表格的渲染过程后，会出现三个tbody，所以

      代码 var tableElem = $(".layui-table-fixed-l"); 而不是var tableElem = $(".workList“)来获取表格DOM元素。

2. 在对父节点禁用，同时添加鼠标悬浮提示信息时，title属性添加在div元素上，而不是input元素。