layui表格指定单元格复选框选择人员 _ layui表格指定单元格复选框的选择与禁用控制-Layui教程-PHP中文网

layui表格中指定列渲染复选框需用templet自定义模板，绑定唯一id（如d.id），在done回调初始化状态，委托事件监听并动态禁用；选中状态须存全局set并渲染时判断，避免与内置checkbox冲突。

layui表格指定单元格复选框选择人员 _ layui表格指定单元格复选框的选择与禁用控制

直接在 cols 配置里用 type: 'checkbox' 是全局的，没法只让某个人员列显示复选框——必须用自定义模板（templet）手动写 <input type="checkbox">，再绑定点击事件。

常见错误是直接在 templet 里写死 checked 属性，导致表格重绘后状态丢失；或者没传 data 到事件里，无法知道点的是哪个人。

用 templet: '<input type="checkbox" name="person" value="{{d.id}}">' 渲染，{{d.id}} 必须是唯一标识（如人员工号），不能用 {{d.LAY_TABLE_INDEX}}
在 done 回调或 on('row') 事件里初始化已选状态：$('input[name="person"][value="' + item.id + '"]').prop('checked', true)
监听点击要委托到 table 容器，避免动态渲染后失效：$(document).on('click', 'input[name="person"]', function(){...})

禁用不是靠 CSS 隐藏或加 disabled 属性完事——layui 的 render() 会清空你手动加的属性。得在模板里根据数据字段动态输出 disabled，且确保该字段在原始数据中存在（如 d.status === 'leave'）。

容易踩的坑：用 d.isDisabled 这种前端临时字段，但没在 data 数组里同步维护，导致翻页或重载后禁用失效。

模板写法：templet: function(d){ return '<input type="checkbox" name="person" value="'+ d.id +'" :>'; }
禁用后仍需拦截点击事件，否则用户右键“检查”删掉 disabled 就能勾选：if ($(this).is(':disabled')) return;
注意兼容性：IE11 下 :disabled 伪类可能不触发事件委托，建议加个 data-disabled 属性辅助判断

如果你同时用了 type: 'checkbox' 的首列（即 layui 自带的全选/单选），又在其他列加了自定义复选框，两者会互相干扰——点击自定义复选框会触发 checkbox 列的 on('checkbox') 回调，甚至改变 checkStatus 结果。

一款深蓝色网站后台管理系统layui框架模板

下载

根本原因是 layui 把所有 input[type=checkbox] 当成表格控制元素处理。解决方案只有一个：不让它识别。

自定义复选框的 name 不能是 'layTableCheckbox' 或空字符串，必须起独立名字，如 name="person-select"
不要给它加 lay-skin="primary" 或任何 layui checkbox 样式类，避免被自动增强
如果用了 lay-filter，确保和表格的 lay-filter 值完全不同，比如表格用 user-table，人员选择用 person-select-filter

layui 表格默认不保存非内置列的状态。翻页后你之前勾选的自定义复选框全没了，因为 DOM 被销毁重建了。

关键不是存 DOM 状态，而是存数据状态——每次渲染前，根据当前页的 d 数据查一遍是否在已选集合里，再决定是否打钩。

用一个全局数组（如 window.selectedPersonIds = []）存已选 ID，增删都操作这个数组
在 templet 函数里判断：var checked = window.selectedPersonIds.includes(d.id) ? 'checked' : '';
注意性能：ID 数组别用 indexOf 查，改用 Set，尤其当人员超 500 条时差异明显

最易被忽略的一点：表格启用 page: true 且设置了 limits，用户切每页条数时也会触发重载，此时必须确保 before 或 request 钩子里没清空 selectedPersonIds ——否则换每页 20 条再切回 10 条，状态就丢了。