当前位置:首页 > 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://www.zhimatong.com/jiaocheng/671.html

为保证教程的实用性及扩大知识面覆盖,如果您有相似问题而未解决,可联系在线客服免费技术支持。

内容有用

联系
顾问

在线
客服
账号登录

没有账号?立即注册

忘记密码

登录即同意用户协议没有账号? 立即注册
账号注册
我已阅读并同意用户协议
立即注册
注册即同意用户协议已有账号? 立即登录
找回密码

操作步骤:邮箱验证->设置新密码

注册即同意用户协议已有账号? 立即登录