關於layui table 合計 功能打開和千位點分割

開始死活那個不顯示啊.  最終顯示了.  有兩種方式

總結 :

第一種方式:

1:打開合計

 ,totalRow: true //開啟合計行
2:在列內的實現有兩種方式 ,如下. d.TOTAL_NUMS 是寫死的

,{field:'Amount', title: '金額',align: 'center', totalRow: true}
,{field:'palAmount', title: '金金額',align: 'center',totalRow: '{{ d.TOTAL_NUMS }} 萬'}

 

 table.render({
      elem: '#test'
      ,url:'/A/Ro/entTest2'
      ,id: 'testReload'//容器的ID
      ,totalRow: true //開啟合計行          這兒有 在列里邊也有,是不是有點多余的感覺

第二種方式 是服務器返回合計,服務器計算好了之后 加入 返回的json 

這是data 換成object 並加入totalRow方式  只需給

totalRow ,count,data 賦值便可

   public class LayInfo
        {
            public int code { get; set; }
            public string msg { get; set; }
            public object totalRow {get;set;}
            public int count { get; set; }
            public object data { get; set; }
        }

totalRow 賦值方式

    object totalRow = new { Amount = 5555 };
    ldi.totalRow = totalRow;

官方說明

https://www.layui.com/doc/modules/table.html#totalRow

• 是否開啟該列的自動合計功能，默認：false。
• 當開啟時，則默認由前端自動合計當前行數據。從 layui 2.5.6 開始： 若接口直接返回了合計行數據，則優先讀取接口合計行數據，格式如下：

{
  "code": 0,
  "totalRow": {
    "score": "666"
    ,"experience": "999"
  },
  "data": [{}, {}],
  "msg": "",
  "count": 1000
}
              

data  構造測試的數據的方式  

         List<object> data = new List<object>();
         LayInfo ldi = new LayInfo();              
                 
                    for (int i = 0; i < 3; i++)
                    {
                        data.Add(new { id=i+1, Amount = 555, PaymentDate = 2021 });
                    }                 
                    ldi.data = data;
                    ldi.count = 3;
      return Json(ldi);

這種測試 虛構數據的方式 前端是沒問題的

前端 table

 layui.use(['table','laydate'], function(){
    var table = layui.table;  
    table.render({
      elem: '#test'
      ,url:'/O/RepaymentTest'
      ,id: 'testReload'//容器的ID
      ,totalRow: true //開啟合計行
        ,cols: [[
        {type:'numbers',title:'序號'}
        ,{field:'id',width:80,  sort: true, totalRowText: '合計'}
        ,{field:'Amount', title: '金額',align: 'center', totalRow: true}
        ,{field:'PaymentDate', title: '付款時間',align: 'center'}

      ]]
      ,page: true
      ,limits: [10,70,100]
      ,limit: 10
      ,where: {

      }
    });

說明前端 能自己統計總數

后來實現后的

 

 

客戶要求 2

 

d.TOTAL_NUMS  用三位點分割開來.這個在前端沒能實現, 嘗試在里邊寫函數沒成,后在后台把json 包內加上了

totalRow 字段解決了需求

 后記: 因后來需要在表內加上分割,發現用模版內配函數的方法能解決問題, 感覺這個合計應該也可以用模版配方法 方式解決. 后來發現似乎無法用模版實現, 應該是控件支持度不夠, 而且 每個列單元格也有千位分割需求, 模版先讓給單元格使用了.總計的話

我最終還是在服務器端實現返回的.

 

千位分割js方法來源:

https://blog.csdn.net/weixin_44504146/article/details/110860316

function fixed(str){
    if (str !== '' && str != null){
      if(str === 0){  //當為0時，不用處理
        return 0 ;
      }else {
      var va=  parseFloat(str);
        return va.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
      }
    } else {
      return '';
    }
  }

 

 此方法中第二個函數 fixed(str)

有報錯

TypeError: str.toFixed is not a function

 var va= parseFloat(str); 就可以了,上邊方法是正確的