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

layui的数据表格totalRow合计之合计数据放首行,表格第一行

layui数据表格统计数据放首行教程来了

近期很多人关注layui数据表格首行统计,具体效果如下图,所以特意将方法分享如下。

layui数据表格统计首行

本功能需要修改layui底层代码,如无代码修改经验,建议谨慎操作。无论如何,修改前请记得备份源码。

本次修改对应文件:/layui/lay/modules/table.js

具体操作步骤:

  1. 代码中查找d.data.totalRow,找到如下代码
  2. "{{# if(d.data.totalRow){ }}",'<div class="layui-table-total">','<table cellspacing="0" cellpadding="0" border="0" class="layui-table" ','{{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}>','<tbody><tr><td><div class="layui-table-cell" style="visibility: hidden;">Total</div></td></tr></tbody>',"</table>","</div>","{{# } }}",
  3. 查找代码<div class="layui-table-body layui-table-main">,将步骤2中的代码复制到<div class="layui-table-body layui-table-main">之前;
  4. <style type="text/css">
    .layui-table-total tr{ background-color:#fff !important;}
    .layui-table-total{ border-bottom: 1px solid #e6e6e6 !important;}
    </style>
    自带的CSS统计行是灰色的,此CSS主要修改统计行背景色和下边框,效果看起来更加美观;
  5. 保存更新缓存后即可。

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

点赞 1
QQ在线咨询