关于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); 就可以了,上边方法是正确的