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

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

实现: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设置不可选

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值