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) {// 找到行内的checkboxvar 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元素。