Layui 表格table 第一次加載動態設置列

                                                                    Layui 表格table 第一次加載動態設置列

1、PHP傳動態數據到前端；前端json一下；循環設置 cols[0] 的值

2、PHP代碼

$types = [ 1 => '類型1', 2 => '類型2', 3 => '類型3' ];
foreach ($types as $k => $v){
    $storeName = 'type_'.$k;
    $result[] = [
        'id' => $k,
        'field' => $storeName,
        'title'=> $v
    ];
}
$this->assign('result', $result);
return $this->fetch();

3、JS代碼

<script>
    let result = {:json_encode($result)};
    layui.use(['table'], function(){
        let $ = layui.$,
            table = layui.table;

        //動態組裝列數據
        let cols = [
                {field: 'name', title: '姓名'},
                {field: 'age', title: '年齡'}
            ];

        //根據result渲染列
        let length = result.length;
        for(let i=0; i<length; i++){
            cols.push({field: result[i]['field'], title: result[i]['title']});
        }
        cols.push({field: 'create_time', title: '創建時間'});

        //表格渲染
        let tableIns = table.render({
            elem: '#id' //表單掛載對象
            ,url: '/././'   //獲取數據的後臺接口
            ,cols: [cols]
            ,text: {
                none: '暫無相關數據！'
            }
            ,where:{delivery_time: '1579142378'} //默認查找條件，where屬性可不設置
            ,page: false    //是否打開分頁
            ,parseData: function(res) {
                return {
                    code: res.code,
                    msg: res.msg,
                    count: res.data.count,
                    data: res.data.data
                }
            }
            ,done:function(res, curr, count){
            }
        });
    });
</script>