当前位置:首页 > layui > 关键词 > totalRow > 正文

layui的表格合计totalRow后面添加单位或文字的方法

layui表格合计功能totalRow默认仅提供当前列表数据合计,本教程提供2种优化方式;统一添加单位和逐项添加不同单位的方法,展示出来更好的用户体验效果

layui合计加单位

代码展示:

tableIn = table.render({
    elem: '#month',
    url:'{:url("day")}',
    method:'post',
    totalRow: true,//开启合计
    cols: [[
        {field:'time',title:'日期',align:'center',totalRowText:'合计'},
        {field:'anliku',title:'案例',align:'center',sort:true,totalRow:true},
        {field:'news',title:'新闻',align:'center',sort:true,totalRow:true},
        {field:'reg',title:'会员',align:'center',sort:true,totalRow:true},
  ]],
  limit: 31, //每页默认显示的数量
  done:function(res, curr, count){
    divArr = $(".layui-table-total div.layui-table-cell");
    $.each(divArr,function (index,item) {
      var _div = $(item);
      var content = _div.html().replace(".00","");//统计取整数
      content = content.replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,');// 数字千分位展示
      if(index >0 )//不给"合计"加单位
      _div.html(content+'次');//增加单位或文字
    });
  }
});

如果每个分类的单位不一样,可以逐个设置;

layui合计加单位逐项添加版

tableIn = table.render({
    elem: '#month',
    url:'{:url("day")}',
    method:'post',
    totalRow: true,//开启合计
    cols: [[
        {field:'time',title:'日期',align:'center',totalRowText:'合计'},
        {field:'anliku',title:'案例',align:'center',sort:true,totalRow:true},
        {field:'news',title:'新闻',align:'center',sort:true,totalRow:true},
        {field:'reg',title:'会员',align:'center',sort:true,totalRow:true},
  ]],
  limit: 31, //每页默认显示的数量
  done:function(res, curr, count){
    divArr = $(".layui-table-total div.layui-table-cell");
    $.each(divArr,function (index,item) {
      var _div = $(item);
      var content = _div.html().replace(".00","");//统计取整数
      content = content.replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,');// 数字千分位展示
      _div.html(content);
  });
  
  var content1 = $(".layui-table-total div.laytable-cell-1-0-1").html();
  $(".layui-table-total div.laytable-cell-1-0-1").html(content1+'元');
  
  var content2 = $(".layui-table-total div.laytable-cell-1-0-2").html();
  $(".layui-table-total div.laytable-cell-1-0-2").html(content2+'角');
  
  var content3 = $(".layui-table-total div.laytable-cell-1-0-3").html();
  $(".layui-table-total div.laytable-cell-1-0-3").html(content3+'分');
 }
});

.laytable-cell-1-0-x x代表第几列的

教程推荐:

本文属原创,转载请注明原文:https://zhimatong.com/jiaocheng/671.html

点赞 0
QQ在线咨询