前几天发现layui的表格合计栏无法固定列,如下图
虽然影响不大,本强迫症看着十分不美观,分析了layui表格html源码,发现layui将固定的列复制到另一个表格,如下是左固定列的表格
<div class="layui-table-fixed layui-table-fixed-l">...</div>
而合计栏是layui-table-total,合计栏也是一个table元素,显而易见合计栏并不存在主表格和固定表格里面。
既然都是表格,那我就把合计栏表格给复制到主表格和固定表格里面。将以下代码放在table的done回调函数内。
// 解决合计列无法固定
// 复制合计栏
let total = this.elem.next().find('.layui-table-total tr').clone();
// 将合计栏添加到表格里
this.elem.next().find('.layui-table-main table').append(total);
// 创建tr节点
const newTrElement = document.createElement("tr");
// 获取合计栏的列
const sourceTdElements = total[0].getElementsByTagName('td');
// 将合计栏的前两列添加到新创建的tr里
for(let i=0;i<2;i++){
newTrElement.appendChild(sourceTdElements[i].cloneNode(true));
}
// 在固定列表格里面添加创建的tr节点
this.elem.next().find('.layui-table-fixed-l .layui-table-body .layui-table').append(newTrElement)
// 将原来的合计栏隐藏
this.elem.next().find('.layui-table-total').css("display","none");
虽然方法笨,但是问题完美解决了。
参考链接
(怎么让layui table 的合计行显示在第一行而不是最后一行. · Issue #I5UVCI · Layui/layui - Gitee.com)