layui table表格的复选框checkbox设置部分为不可选

Start2019

墨衍会员 · AI 创作全网分发码龄7年

关注

转载 2023-06-13 08:49:09 8.3k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

需求：如上图，某些数据禁用删除功能，那么全选时，这些数据前面的复选框也不能选。

实现：在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($(".layui-table-fixed-l input[name=siam_one]:checked"), function (i, value) {
    ids[i] = $(this).attr("data-id");  // 如果需要获取其他的值 需要在模板中把值放到属性中 然后这里就可以拿到了
});

注意：

如果在cols中给 #checkbd 设置了 fixed:left，那么获取选中数据时 input[name=siam_one]:checked 前面一定要加上“.layui-table-fixed-l”，因为给复选框设置了固定样式，input[name=siam_one]:checked 不仅在 layui-table-body layui-table-main 中存在，在layui-table-fixed layui-table-fixed-l 中也存在，不加的话，全选后取消部分复选框，得到的值仍然是全部的复选框。

网上搜索到的做法是：使用done函数禁用。但是有瑕疵，全选不可用，并且不可选状态和可选状态的复选框样式很接近，建议重写不可选的样式。

转载：layui数据表格的checkbox设置部分为不可选_璞~的博客-CSDN博客_checkbox设置不可选

收录于