从Layui 2.4.0版本开始,Layui Table开始支持数据表格添加合计行的功能,表格渲染时添加一个属性参数即可。但是最近做项目,公司不使用新版本,又需要实现该功能,于是便只有自己实现了。
废话不多说,直接上代码实现,样式是Layui官方的样子。
实现思路:遍历数据表格的数组,然后计算出总数量和总价;数据表格渲染时,如果有数据内容就进行合计;
数据表格被编辑就重新进行计算,有数据被删除也需要重新计算,所以我把合计行的计算单独摘出来了。
我的Layui版本:2.2.3
1 |
|
效果:
还可完善:
- 拖动横向滚动条时,合计行跟着拖动
- 动态拉宽某一字段时合计行也跟着拉宽
Layui使用起来还是有很多不舒服的地方的,有时间慢慢写下来自己遇到的问题和自己怎么解决的。