layui 表格復選框根據條件進行限制

如下圖，在列表中加入復選框之后，有些數據不需要在選擇，需要屏蔽或者禁用掉。layui沒有提供相應的功能，需要自己擴展。

在頁面上添加一個按鈕，layui是根據js來添加，注意 table 中的 lay-filter="productparameter_filter"   和按鈕標簽上的 getCheckData  后面根據productparameter_filter 來操作

 <table id="productparameterinfo" class="layui-hide" lay-filter="productparameter_filter"></table>

<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;
            }
        });

 

到此就完成一個頁面渲染到復選框選擇后提交的過程；