需求:如上图,某些数据禁用删除功能,那么全选时,这些数据前面的复选框也不能选。
实现:在layui数据表格中设置了字段为 type:checkbox 但是想要实现部分不显示,不可选的功能。layui内置没有该功能,所以只能自己实现。
table.render({elem: '#junTable',url: '',cols: [[{templet: "#checkbd",title: "<input type='checkbox' name='siam_all' title='' lay-skin='primary' lay-filter='siam_all'> ",width: 60,},{ type: 'numbers', title: '序号', fixed: 'left' }, { field: 'z_id', title: 'id' }]],page: true,limit: 10,...done: function(res){//防止全选后表格翻页,复选框选中样式依然存在$("input[name='siam_all']").prop("checked", false); form.render("checkbox");}
});<script type="text/html" id="checkbd">{{# if (d.status=== 1){ }}// 这里是判断要不要显示的条件<input type="checkbox" name="siam_one" title="" lay-skin="primary" data-id = "{{ d.noteId }}">{{# } }}
</script>
table.render() 中的 cols 是设置表头复选框,<script>标签中的判断是设置表格数据中的复选框显示。
到这里就可以部分数据不显示复选框了,但是全选功能和获取id的功能还是不正常,需要做以下操作:
设置全选功能:
form.on("checkbox(siam_all)", function () {var status = $(this).prop("checked");$.each($("input[name=siam_one]"), function (i, value) {$(this).prop("checked", status);});form.render();
});
获取选中的数据:
var ids = [];
$.each($("input[name=siam_one]:checked"), function (i, value) {ids[i] = $(this).attr("data-id"); // 如果需要获取其他的值 需要在模板中把值放到属性中 然后这里就可以拿到了
});
网上搜索到的做法是:使用done函数禁用。但是有瑕疵,全选不可用,并且不可选状态和可选状态的复选框样式很接近,建议重写不可选的样式。
转载:layui数据表格的checkbox设置部分为不可选_璞~的博客-CSDN博客_checkbox设置不可选