不能直接写HTML是因为Layui的totalRow只输出字段值、不解析HTML;应改用totalRowTemplate自定义模板,支持Layui语法和事件绑定。
合计行右侧加链接为什么不能直接写 HTML?
layui 的 totalrow 是通过内置模板渲染的,它只识别 field 对应的字段值,不执行 html 解析——你传入 "@#@#@#@#@#@#@#@#@#@0",最终只会显示为纯文本。这是最常踩的坑,很多人试了几次发现链接没反应,其实是被当字符串原样输出了。
用 totalRowTemplate 替代默认合计行
Layui 2.8+ 支持 totalRowTemplate 配置项,允许你完全自定义合计行结构。它接收一个字符串模板(支持 Layui 模板语法),且会在数据上下文中自动注入 data(即各列的合计值)和 cols(列配置数组)。
实操建议:
- 在
table.render()配置中移除totalRow: true,改用totalRowTemplate - 模板中用
{{ d.字段名 }}取对应列合计值,右侧链接用普通@#@#@#@#@#@#@#@#@#@1') - 确保
exportTotal函数已全局声明,或用事件委托绑定
链接点击后如何获取当前合计数据?
合计行本身不携带原始数据对象,但你可以从 table.cache 中重建统计结果,或更简单——在生成合计行时把数据挂到 DOM 上:
- 在
totalRowTemplate中加data-amount="{{ d.amount }}" data-count="{{ d.count }}" - JS 中用
$(this).closest('tr').data('amount')拿值 - 若用老版本 DOM 注入,可在追加链接时同步设置:
$a.data('amount', amountValue)
别忘了给链接加 cursor: pointer 和适当 padding,否则视觉上不像可点元素——这个细节上线后经常被产品揪着问。
totalRowTemplate: '<tr>
<td>合计</td>
<td>{{ d.amount }}</td>
<td>{{ d.count }}</td>
<td><a href="javascript:void(0)" onclick="exportTotal()">导出汇总</a></td>
</tr>'











