天天看點

layui資料表格複選框自動選中部分選項layui資料表格複選框自動選中部分選項

layui資料表格複選框自動選中部分選項

layui官方文檔中給出了資料表格複選框全選字段,如下,但是部分選中沒有配置項。

layui資料表格複選框自動選中部分選項layui資料表格複選框自動選中部分選項

部分選中的方法:

利用異步資料接口的參數:

layui資料表格複選框自動選中部分選項layui資料表格複選框自動選中部分選項

實作代碼:

layui.table.render({
    id: "gridid",
    elem: '#grid',
    url: url,
    where: {},
    cols: [[
        {type: 'checkbox'},
        {field: 'code', width: 220, title: '編号'},
        {field: 'name', width: 220, title: '名稱'},
        {field: 'remark', width: 220, title: '備注'},
    ]],
    loading: true,
    parseData:function(res){ //res為原始傳回的資料
        var data = res.data
        if(cacheArr){ //cacheArr為定義的全局緩存數組,記錄初始化的時候會被自動選中的資料項
            for(var i = 0; i < res.data.length; i++){
                for(var j = 0; j < cacheArr.length; j++){
                	//對表格的資料和緩存的資料進行循環對比,從原始資料中找到緩存的資料
                    if(cacheArr[j] == res.data[i].code){
                    	//找到需要自動選中的資料,将該項資料的LAY_CHECKED字段改成true
                        data[i]["LAY_CHECKED"]=true; 
                    }
                }
            }
        }
        return {
            "code": res.code, //解析接口狀态
            "msg": res.msg, //解析提示文本
            //将重新處理好的資料傳給表格以完成渲染
            "data": data //解析資料清單
        };
    },
});