Layer表格彙總（所有）數據根據配置動態顯示

一、描述

看標題大家可能雲裏霧裏，這裏解釋下：就是一個頁面有一個表格（分頁的），表格上面有一行，是對錶格金額字段的彙總（所有數據彙總，不是彙總當前頁），但是這個金額的類型是不固定的（從配置讀取），未來還會增加金額類型。

二、環境

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

三、講解

1、彙總數據計算

• PHP計算每種類型的彙總數據，每種類型的數據要給默認值

2、頁面處理

• 定義span標籤，動態的金額類型用模板引擎直接在html中渲染，用於接收動態數據
• Layui表格加載完成done之後給對應的金額類型賦值對應的值

四、代碼

1、PHP根據動態配置返回彙總數據

• 我們自定義返回的字段類似於：money_1,money_2,...,money_n，則PHP代碼如下：

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

    //初始化動態的金額類型的值
    //這裏相當於： $money1 = $money2 = $money3 = 0;
    foreach ($config as $k => $v){
        $moneyName = 'money' . $v['value'];
        $$moneyName = 0;
    }

    //echo $money1;   //輸出 0

    $moneyData = [1 => 10, 2 => 20, 3 => 30];   //假設這是查詢出來moneyData的值，moneyData可能爲空
    //當金額類型的值存在時，重置$money1,$money2,$money3的值
    if ($moneyData){
        foreach ($moneyData as $k => $v){
            $moneyName = 'money' . $k;
            $$moneyName = $v;
        }
    }

    //echo $money1;   //該值已被重置，打印 10

    // $result爲返回的值
    $result = [
        'id' => 1,
        'name' => '金額類型',
        'other_money' => 999,
    ];
    //動態拼接金額類型$money1,$money2,$money3的值
    foreach ($config as $k => $v){
        $moneyName = 'money' . $v['value'];
        $result = array_merge($result, ['money_' . $k => $$moneyName]);
    }
    var_export($result);
}

• 打印 $result的值如下

array (
  'id' => 1,
  'name' => '金額類型',
  'other_money' => 999,
  'money_0' => 10,
  'money_1' => 20,
  'money_2' => 30,
)

2、頁面處理

1）、把$config處理成前端需要的格式

• PHP代碼如下

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

    $result = [];   //注意：我們這裏只用到了$result中的id，title字段；field字段是在動態渲染表格列中用到了
    $config = array_column($config, 'name', 'value');
    foreach ($config as $k => $v){
        $moneyName = 'money_' . $k;
        $result[] = [
            'id' => $k,
            'field' => $moneyName,
            'title'=> $v
        ];
    }
    var_export($result);

}

• 打印

array (
  0 => 
  array (
    'id' => 1,
    'field' => 'money_1',
    'title' => '金額1',
  ),
  1 => 
  array (
    'id' => 2,
    'field' => 'money_2',
    'title' => '金額2',
  ),
  2 => 
  array (
    'id' => 3,
    'field' => 'money_3',
    'title' => '金額3',
  ),
)

2）、把值$result傳到頁面

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

3）、html中動態顯示標籤

其他費用：<span class="money-class" id="other-money"></span>&nbsp;&nbsp;
<!-- 動態顯示彙總的金額類型 -->
{foreach $result as $key=>$value}
    {$value.title}：<span class="money-class" id="money-{$value.id}"></span>&nbsp;&nbsp;
{/foreach}

4）、js賦值

• layui表格加載完畢done之後給動態的金額類型賦值

//獲取PHP傳過來的$result
let result = {:json_encode($result)};

//表格渲染完成之後動態賦值
//表格渲染
let tableObject = table.render({
    elem: '#id'
    ,url: 'url'
    ,cols: [cols]
    ,text: {
        none: '暫無數據'
    }
    //...
    ,done:function(res, curr, count){
        if(curr == 1){  //如果是第一頁才重新計算總和
            $.ajax({
                type: "POST",
                url: "/.../test",
                data: globalWhere,
                dataType: "json",
                success: function (res) {
                    $('span#other-money').text(res.data.other_money);
                    //動態賦值
                    let length = result.length;
                    for (let i = 0; i < length; i++){
                        let key = 'money_' + result[i]['id']; //後臺傳過來的彙總值
                        $('span#money-'+result[i]['id']).text(res.data[key]);
                    }
                }
            });
        }
    }
});

五、相關博文

• 如果需要知道怎麼動態加載表格列，請參考這一篇：Layer表格列根據配置動態顯示