讲师中心 微信公众号
AI工具推荐 视频效率加速

Layui如何实现在表格头部添加自定义的全局统计

夏婷吖_1267

夏婷吖_1267

发布时间:2026-05-11 07:33:53

|

180人浏览过

|

来源于php中文网

原创

用layui.table.set()设置defaultToolbar添加全局统计按钮,并在done回调中通过res.totalRow或额外请求获取全量数据,配合totalRowTemplet模板展示自定义统计值。

如何用 defaultToolbar 添加全局自定义统计按钮

直接改全局配置就能让所有表格都带「统计」按钮,不用每个 table.render() 里重复写。关键不是加按钮,而是让按钮触发后能拿到全量数据(非当前页)做计算。

必须用 layui.table.set() 设置全局 defaultToolbar,否则只对单个表格生效:

layui.use('table', () => {
  layui.table.set({
    defaultToolbar: [
      'filter', 'print', 'exports',
      {
        title: '全量统计',
        layEvent: 'LAYTABLE_STATS_ALL',
        icon: 'layui-icon-chart'
      }
    ]
  });
});

注意:图标类名 layui-icon-chart 需确保你用的 Layui 版本包含该 icon(2.8+ 支持,旧版可用 layui-icon-template 替代)。

为什么点击后拿不到全部数据?done 回调才是关键

totalRow: true 默认只统计当前页,而「全局统计」意味着要遍历全部原始数据——但分页后前端根本没加载全量数据。所以不能依赖 totalRow 渲染逻辑,得靠 done 回调手动取数。

  • 如果后端已返回全量合计字段(如 totalRow 字段含 { totalAmount: 123456 }),直接从 res.totalRow 读取最稳
  • 如果后端没提供,且数据量小(≤5000 条),可在 done 中用 obj.data 累加,但注意:这是当前页数据,不是全量
  • 真要全量统计又没后端支持?只能额外发一次请求查合计,比如 /api/orders/summary

layui.onevent 监听统计事件时的三个易错点

监听按钮点击后,别直接在回调里写统计逻辑——容易和表格重载、异步加载冲突。

  • 不要在监听函数里直接调 table.reload(),这会打断用户操作流;应先弹 loading,再异步取数据
  • obj.config.id 是当前表格 ID,但有些表格没显式设 id,会导致 undefined;稳妥做法是用 obj.elem 反查绑定的表格实例
  • 统计结果展示位置要明确:是弹 layer.msg()、填到合计行、还是插入新 DOM?Layui 不提供默认位置,必须自己定

示例中常漏掉对空数据的判断:

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
layui.onevent('table', 'toolbar()', obj => {
  if (obj.event === 'LAYTABLE_STATS_ALL') {
    const tableIns = layui.table.get(obj.config.id); // 先确保能拿到实例
    if (!tableIns || !obj.config.url) return; // 没 URL 就没法查全量
<pre class="brush:php;toolbar:false;">// 此处应发请求或读 res.totalRow,而非用 obj.data

} });

合计行里显示自定义统计值,totalRowTemplet 比 totalRow 更灵活

当你要显示「平均单价」「最高单笔」「订单数/金额比」这类非简单求和时,totalRow: true 失效,必须用 totalRowTemplet。

它接收一个函数,参数 d 是当前页所有行数据数组 —— 但注意:它仍只是当前页,不是全量。所以真正要用它,前提是后端把全量统计结果塞进响应的 totalRow 字段里,前端再通过模板语法引用:

cols: [[
  { field: 'amount', title: '金额', width: 100, totalRow: true },
  { 
    field: 'rate', 
    title: '转化率', 
    totalRowTemplet: function(d) {
      // 假设后端返回了 { totalRow: { avgRate: 0.234 } }
      return '平均:' + (d.TOTAL_ROW?.avgRate * 100).toFixed(1) + '%';
    }
  }
]]

这里 d.TOTAL_ROW 是 Layui 自动注入的响应中的 totalRow 对象,不是 d 的属性——文档不提这点,很多人卡在这儿。

复杂点在于:不同列可能依赖不同后端统计字段,而 totalRowTemplet 函数每次只作用于单列,无法跨列共享计算结果。真要联动,得在 done 里统一算好挂到全局变量,再在各列模板里读。

热门AI工具

更多
音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2463

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

5323

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6350

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

5958

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

843

2024.05.22

Linux 新手先学哪些命令
Linux 新手先学哪些命令

Linux新手命令专题汇集终端基础、文件目录操作、文本查看、软件安装和权限管理等入门文章,帮助按实际任务练习常用命令并建立命令行操作习惯。

0

2026.10.15

MySQL 忘记密码怎么办
MySQL 忘记密码怎么办

MySQL忘记密码专题汇集不同版本与系统下的root密码重置方法,覆盖MySQL 5.7、8.0、Mac、Linux及本地集成环境,并提示恢复权限与重新登录的检查步骤。

0

2026.10.15

Vue.js 中 ref 和 reactive 的区别
Vue.js 中 ref 和 reactive 的区别

Vue.js中ref和reactive的区别专题汇集两种响应式API的定义、访问方式、对象解构、侦听与性能取舍等文章,帮助结合实际状态类型选择合适写法。

0

2026.10.15

VS Code 怎么配置开发环境
VS Code 怎么配置开发环境

VS Code开发环境专题汇集编辑器安装、语言扩展、编译器、解释器、终端和调试配置文章,覆盖Java、Python、C++和PHP等常见语言的入门设置。

0

2026.10.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.9万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.1万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn