如有同样问题的朋友。请先看
2022-04-14 工作记录--LayUI-数据表格中固定列对应的合计部分也实现固定_layui合计行也想固定列-CSDN博客
可以说,该作者解决了我一半的问题,因此在作者的原基础的启发下;重新写了一个新的方法。
为什么要写一个新方法呢。一开始使用该作者的代码的时候我很欢喜,感觉终于解决问题了。可惜的是有一个很严重的BUG,就是点击layui的分页下拉的时候。合计这两个字就会消失了。但是如果点击最后一页的时候。合计这两个字又出现了。
使用作者的代码
1、一开始是正常的:效果和作者展示的一样
2、如果点击了分页中的下拉:如下
3、就会出现如下问题:合计不见了。
4、但是点击了最后一页,合计又出现了
新的办法如下:
function fixTotalColumns(addressName, orgName,creatorName) {
var total_width = 0;
var w1 = 0;
var w2 = 0;
var w3 = 0;
var w4 = 0;
if(addressName) {
w1 = $('.layui-table-total tr td[data-field="addressName"]').outerWidth(true); // 获取到合计里第一列的宽度
total_width += w1;
}
if(orgName) {
w2 = $('.layui-table-total tr td[data-field="orgName"]').outerWidth(true); // 获取到合计里第二列的宽度
total_width += w2;
}
if(creatorName) {
w3 = $('.layui-table-total tr td[data-field="creatorName"]').outerWidth(true); // 获取到合计里第三列的宽度
total_width += w3;
}
$('.layui-table-total table').before('<div class="layui-table-fixed-k" style="' +
' background-color: #F2F2F2;' +
' position: absolute;' +
' width: '+(total_width-10)+'px;' +
' z-index: 3;' +
' text-align: right;' +
' height: 38px;' +
' line-height: 35px;' +
' font-size: 14PX;' +
' font-weight: bold; padding-right: 10px' +
'">合计:</div>');
}
希望这个方法能帮助新的朋友;如有需交流,可以留意;谢谢!!!!