layui 表格复选框根据条件进行限制

转载

mob604756fbd94e 2021-10-13 18:05:00

如下图，在列表中加入复选框之后，有些数据不需要在选择，需要屏蔽或者禁用掉。layui没有提供相应的功能，需要自己扩展。

layui 表格复选框根据条件进行限制_ico

在页面上添加一个按钮，layui是根据js来添加，注意 table 中的 lay-filter="productparameter_filter" 和按钮标签上的 getCheckData 后面根据productparameter_filter 来操作


<script type="text/html" id="toolbar_plat">
    <div class="layui-btn-container"><button class="layui-btn layui-btn-sm lay_bnt_border " lay-event="getCheckData">批量审核</button>
    </div>
</script>

在layui的table.render 中字段加上checkbox

 { type: 'checkbox', width: 48 }

然后子自定义条件等

            , done: function (res) {
                var state = "";
                for (var i in res.data) {
                    var item = res.data[i];
                    if(item.examine_state == "T") {// 这里是判断需要禁用的条件（如：状态为0的）
                        // checkbox 根据条件设置不可选中
                        $('tr[data-index=' + i + '] input[type="checkbox"]').prop('disabled', true);
                        state = "1";// 隐藏表头全选判断状态
                        form.render();// 重新渲染一下
                    }
                }
                //判断条件
                if (state == "1") {
                    // 如果当前页有审核的不允许全选 checkbox
                    // $('th[data-field=0] div').replaceWith('<div class="layui-table-cell laytable-cell-5-0-0"><span></span></div>');
                    $('th[data-field=0] div input[type="checkbox"]').prop('disabled', true);
                }
                else {
                    //翻页显示全选按钮 checkbox
                    $('th[data-field=0] div').replaceWith('<div class="layui-table-cell laytable-cell-1-0-0 laytable-cell-checkbox"><input type="checkbox" name="layTableCheckbox" lay-skin="primary" lay-filter="layTableAllChoose"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div></div>');
                }
                form.render();// 重新渲染一下
            }

选择之后获取选取的数据

 //触发事件--新增   表头上方按钮（工具栏）
        table.on('toolbar(productparameter_filter)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {               
                case 'getCheckData':
                    var data = checkStatus.data;
                    var clickIDArr = new Array();
                    for (m in checkStatus.data) {
                        clickIDArr[m] = checkStatus.data[m]["guid"]
                    }
                    console.log("选中列表" + clickIDArr );
                    if(clickIDArr.length == 0) {
                        layer.alert("请选择要审核的数据");
                        return false;
                    }
         　　　　　　//TODO..操作数据
                    break;
            }
        });