技術標籤：Layuilayuicheckbox

記錄：layui table.render開啟複選框checkbox，並根據返回值設定複選框選中。
HTML程式碼：

        <div class="layui-form-item">
            <label class="layui-form-label">物料</label>
            <div class="layui-input-block">
                <table
 
 class="layui-hide" id="material_table"></table>
            </div>
        </div>
        <input name="materialid" type="hidden" value="{$row.materialid}">

JS程式碼：

<script src="__STATIC__/jquery.min.js?v={$version}"
 
 charset="utf-8"></script>
<script>
//JavaScript程式碼區域
layui.use(['element', 'table', 'form'], function () {
	var element = layui.element,
		table = layui.table
        , form = layui.form
        ,laydate = layui.laydate;

    var ids = [{$row.materialid}];  //資料格式為 [2,3]
    var
 
 textid;
    var warehouse_id;
    var customer_id="{$row.customer_id}";
    //獲取客戶倉儲合同中的物料
    table.render({
        elem: '#material_table'
        ,url:'getCustomerMaterial?customer_id='+customer_id
        ,cols: [[
            {field:'id',type:'checkbox',}
            // ,{field:'id', width:50, title: 'ID'}
            ,{field:'materialCateName', width:100, title: '分類'}
            ,{field:'title', minWidth:120, title: '物料名稱'}
            ,{field:'code', minWidth:100, title: '物料編碼'}
            ,{field:'help_title', title: '助記名', minWidth: 100}
            ,{field:'hetongPrice', minWidth:80, title: '合同單價'}
            ,{field:'model', width:80, title: '型號'}
            ,{field:'guige', minWidth:80, title: '規格'}
            ,{field:'color', minWidth:80, title: '顏色'}
            ,{field: '', minWidth:120, title: '長*寬*高(m)', align:'center',templet:function(d){
                return d.long + '*' +d.wide + '*' +d.high;
            }}
            ,{field:'weight', width:90, title: '重量(kg)'}
            ,{field:'goodsUnitName', width:80, title: '單位'}
            ,{field:'number_unit', width:100, title: '單位數量'}
        ]]
        ,page: false
        , done: function (res, curr, count) {
            textid = res.data;
            // warehouse_id=id;
            for (var i = 0; i < res.data.length; i++) {
                //判斷複選框是否選中
                if (ids.indexOf(res.data[i].id) > -1){
                    //這句才是真正選中，通過設定關鍵字LAY_CHECKED為true選中
                    res.data[i]["LAY_CHECKED"] = 'true';
                    //下面三句是通過更改css來實現選中的效果
                    var index= res.data[i]['LAY_TABLE_INDEX'];
                    $('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                    $('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                }
            }
            form.render();
        }
        , headers: { Authorization: 'token456123' }
    });
    // form.on('checkbox', function (obj) {
    //     console.log(999)
    // });
    //監聽複選框事件
    table.on('checkbox', function (obj) {
        var data = obj.data;
        var laybox = $("input[name='layTableCheckbox']");
        if (obj.checked) {
            if (obj.type == 'one') {
                if (ids.indexOf(data.id) == -1){
                    ids.push(data.id);
                }
            } else {
                for (var i = 0; i < textid.length; i++) {
                    if (ids.indexOf(textid[i].id) == -1){
                        ids.push(textid[i].id);
                    }
                }
            }
        } else {
            if (obj.type == 'one') {
                for (var i = 0; i < ids.length; i++) {
                    if (ids[i] == data.id) {
                        ids.splice(i, 1);
                    }
                }
            } else {
                for (var j = 0; j < textid.length; j++) {
                    for (var i = 0; i < ids.length; i++) {
                        if (ids[i] == textid[j].id) {
                            ids.splice(i, 1);
                        }
                    }
                }
            }
        }
        $('input[name=materialid]').val(ids);
    });
})
</script>

php 程式碼：

    /**
     * @NodeAnotation(title="獲取客戶倉儲合同中的物料")
     */
    public function getCustomerMaterial()
    {        
        if ($this->request->isAjax()) {
            $customer_id = input('customer_id');
            $customer_material_row = (new CustomerStorageContractModel())->where([['customer_id','=',$customer_id],['status','=',1]])->field('material_arr')->find();
            if(!$customer_material_row){
                $data = [
                    'code'  => -1,
                    'msg'   => '未查到此客戶名下有效的倉儲合同',
                    'count' => 0,
                    'data'  => [],
                ];
                return json($data);
            }
            $customer_material_arr = $customer_material_row['material_arr'];
            if(!$customer_material_arr){
                $data = [
                    'code'  => -1,
                    'msg'   => '物料資訊不存在',
                    'count' => 0,
                    'data'  => [],
                ];
                return json($data);
            }
            $customer_material_arr = json_decode($customer_material_arr,true);
            $customer_materialid_arr = array_keys($customer_material_arr);
            $list = (new MaterialModel())->whereIn('id',$customer_materialid_arr)->field('id,cateid,title,code,help_title,model,guige,color,long,wide,high,weight,number_unit,unitid,purchase_unit_price,is_danger')->select()->each(function($item,$key)use($customer_material_arr){
                $item['materialCateName'] = $item->materialCate ? $item->materialCate->name : '';   //分類名稱
                $item['hetongPrice'] = $customer_material_arr[$item['id']]['price'];    //合同單價
                $item['goodsUnitName'] = $item->goodsUnit ? $item->goodsUnit->name : '';   //計量單位
                $item['long'] = floatval( $item['long']);
                $item['wide'] = floatval( $item['wide']);
                $item['high'] = floatval( $item['high']);
                $item['weight'] = floatval( $item['weight']);
                $item['number_unit'] = floatval( $item['number_unit']);
            });
            $data = [
                'code'  => 0,
                'msg'   => '',
                'count' => count($list),
                'data'  => $list,
            ];
            return json($data);
        }
    }

頁面效果：