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

作者 : MOOMOO 本文共907个字,预计阅读时间需要3分钟 发布时间: 2022-05-3 共40人阅读

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

layui数据表格统计首行

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

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

具体操作步骤:

  1. 代码中查找d.data.totalRow,找到如下代码
    1. “{{# 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>”,”{{# } }}”,
  2. 查找代码<div class=”layui-table-body layui-table-main”>,将步骤2中的代码复制到<div class=”layui-table-body layui-table-main”>之前;
    1. <style type=”text/css”>
    2. .layui-table-total tr{ background-color:#fff !important;}
    3. .layui-table-total{ border-bottom: 1px solid #e6e6e6 !important;}
    4. </style>

    自带的CSS统计行是灰色的,此CSS主要修改统计行背景色和下边框,效果看起来更加美观;

  3. 保存更新缓存后即可。
1. 本站所有资源来源于用户上传和网络,仅作为演示数据,如有侵权请邮件联系站长!
2. 本站客服QQ:4387159,唯一购买官网:MooMoo.TOP!
3. 盗版,破解有损他人权益和违法作为,请各位会员支持正版!
MooMoo » layui的数据表格totalRow合计之合计数据放首行,表格第一行

常见问题FAQ

是否支持共享资源赚外快?
本站支持任何人上传资源,一经采用即可展示,客户下单既有80%的提成。
可以免费教技术吗?
大家可以加群进行探讨共同进步,重点问题管理员会进行解答。
我是小白要怎么学习?
加群后做到不耻下问,看文章学习演示就能成为大佬。

发表评论