Layerテーブル要約(すべて)データ構成に従って動的に表示

目次

一、説明

二、環境

三、説明

1、要約データ計算

2、ページ処理

四、コード

1、PHPは、動的構成に従って要約データ

を返す.

2、ページ処理

1)、$configをフロントエンドに処理するために必要なフォーマット

.

2)、ページ

に$resultを渡す

)、htmlにおける動的表示ラベル

4)、js賦値

五、関連博文

一、説明
タイトルを見て、皆さんは霧の中にいるかもしれませんが、ここで説明します:1つのページに1つの表(ページングされた)があり、表の上に1行があり、表の金額フィールドの要約(すべてのデータの要約、現在のページの要約ではありません)ですが、この金額のタイプは固定されていません(構成から読み取り)、将来的には金額のタイプが増加します.
二、環境

オペレーティングシステムWin 10

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>  

{foreach $result as $key=>$value}
    {$value.title}：<span class="money-class" id="money-{$value.id}">span>  
{/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表の列は構成に従って

を動的に表示します.