Layer表格列根據配置動態顯示

一、環境

• 操作系統 Win10
• Layui版本 2.4.5
  查看Layui版本：alert(layui.v);
• PHP版本 7.1.33

二、講解

1、需要修改的地方

• 1、需要PHP動態處理每一列的數據
• 2、需要動態拼接表格的列，即 table.render 中 cols字段
  • 把配置的值處理成Layui可以處理的格式，通過模板引擎傳到頁面，Js處理拼接table.render的cols字段

三、代碼

1、配置的值（可變的）

• 比如配置的值如下

$config = [
    ['name' => '類型1', 'value' => 1],
    ['name' => '類型2', 'value' => 2],
    ['name' => '類型3', 'value' => 3],
];

2、PHP動態處理每一列數據

• 我們自定義每一列的類型值爲type_1,type_2,...,type_n，則PHP代碼如下：

public function test(){
    //比如配置的值如下
    $config = [
        ['name' => '類型1', 'value' => 1],
        ['name' => '類型2', 'value' => 2],
        ['name' => '類型3', 'value' => 3],
    ];

    //假設列表數據是這樣
    $list = [
        ['name' => '姓名1', 'age' => 1],
        ['name' => '姓名2', 'age' => 2],
        ['name' => '姓名3', 'age' => 3]
    ];

    //處理列表數據:追加上動態配置的列
    foreach ($list as &$value){
        foreach ($config as $v){
            $type = $v['value'];
            $value["type_{$type}"] = 0;
        }
    }
    var_export($list);
}

• 打印的值如下

array (
  0 => 
  array (
    'name' => '姓名1',
    'age' => 1,
    'type_1' => 0,
    'type_2' => 0,
    'type_3' => 0,
  ),
  1 => 
  array (
    'name' => '姓名2',
    'age' => 2,
    'type_1' => 0,
    'type_2' => 0,
    'type_3' => 0,
  ),
  2 => 
  array (
    'name' => '姓名3',
    'age' => 3,
    'type_1' => 0,
    'type_2' => 0,
    'type_3' => 0,
  ),
)

3、動態追加layui表格的列

1、先處理下配置$config的格式

• 代碼如下

public function test(){
    //比如配置的值如下
    $config = [
        ['name' => '類型1', 'value' => 1],
        ['name' => '類型2', 'value' => 2],
        ['name' => '類型3', 'value' => 3],
    ];

    $result = [];   //field爲table.render中cols的field；title爲table.render中cols的title
    $config = array_column($config, 'name', 'value');
    foreach ($config as $k => $v){
        $typeName = 'type_' . $k;
        $result[] = [
            'id' => $k,
            'field' => $typeName,
            'title'=> $v
        ];
    }
    var_export($result);
}

• 打印的值如下

array (
  0 => 
  array (
    'id' => 1,
    'field' => 'type_1',
    'title' => '類型1',
  ),
  1 => 
  array (
    'id' => 2,
    'field' => 'type_2',
    'title' => '類型2',
  ),
  2 => 
  array (
    'id' => 3,
    'field' => 'type_3',
    'title' => '類型3',
  ),
)

2、已經處理好了值，把值傳到頁面，頁面處理$result

1）、把值傳到頁面

$this->assign('result', $result);

2）、頁面拼接cols字段

//動態組裝列數據
let result = {:json_encode($result)};   //獲取到PHP傳過來的$result

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

//表格渲染
let tableObject = table.render({
    elem: '#id'
    ,url: 'url'
    ,cols: [cols]
    ,text: {
        none: '暫無數據'
    }
    //...
});

四、相關博文

• 如果需要知道怎麼動態加載表格彙總數據，請參考這一篇：Layer表格彙總（所有）數據根據配置動態顯示