layui的表格合计totalRow后面添加单位或文字的方法
layui表格合计功能totalRow默认仅提供当前列表数据合计,本教程提供2种优化方式;统一添加单位和逐项添加不同单位的方法,展示出来更好的用户体验效果
代码展示:
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 = $(".table-total div.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+'次');//增加单位或文字 }); } });
如果每个分类的单位不一样,可以逐个设置;
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 = $(".table-total div.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 = $(".table-total div.laytable-cell-1-0-1").html(); $(".table-total div.laytable-cell-1-0-1").html(content1+'元'); var content2 = $(".table-total div.laytable-cell-1-0-2").html(); $(".table-total div.laytable-cell-1-0-2").html(content2+'角'); var content3 = $(".table-total div.laytable-cell-1-0-3").html(); $(".table-total div.laytable-cell-1-0-3").html(content3+'分'); } });
.laytable-cell-1-0-x x代表第几列的
教程推荐:
本文属原创,转载请注明原文:https://www.zhimatong.com/jiaocheng/671.html
为保证教程的实用性及扩大知识面覆盖,如果您有相似问题而未解决,可联系在线客服免费技术支持。
内容有用
热门主题
相关阅读
- layui通过页面地址传参数,定位指定tab选项卡的方法
- layui框架开发,基于xm-select实现下拉多选的方法
- layui框架使用,layer.open隐藏/取消确定按钮的方法
- layui表格排序sort设置,layui能根据中文数字排序吗
- layui触发排序切换,如何实现全局排序
- layui整合codemirror解决获取不到textarea值的方法
- layui中根据创建时间sort排序
- 现在想用layui怎么办
- layui的表格合计totalRow后面添加单位或文字的方法
- layui为什么select/checkbox/radio没显示
- layui 表格sort排序时,序号不打乱
- layui引用其他页面,并在提交后关闭引用页面,且刷新当前页面的方法