2022-04-14 工作记录--LayUI-数据表格中固定列对应的合计部分也实现固定

LayUI-数据表格中固定列对应的合计部分也实现固定

在数据表格中，给前四列加上fixed:true实现固定定位，此时需要新增一个需求：在表格的最下方加上合计行，并且让合计行中的前四列也实现固定定位，如下图1所示👀。

那么🐱‍🚀，

第一步、实现数据表格中合计行的开启

即 在表格的最下方加上合计行，如下图2所示：

• 第1步、在table.render({})里面加入totalRow: true开启合计行；
• 第2步、在table.render({ cols: [[]]})里给需要开启合计的col加上totalRow: true，并给field: 'real_name, title: '姓名'的col加上totalRowText: '合计：'。

第二步、数据表格中固定列对应的合计部分也实现固定

结合项目，即 让合计行中的前四列也实现固定定位 ，如上图1所示：

• 1、分析：在LayUI文档中并未发现实现固定合计行某些列的方法，So，需要我们自己来操作；
• 2、解决方法：在数据表格渲染的回调函数【table.render({})里的done:function(res, curr, count) {}】里面加上如下代码：

// 合计部分 固定列对应的合计部分仍然固定
// $(标签名).outerWidth(true)：获取内容+padding+border+margin的宽度
// 【补充】可先观察td中是否有属性data-minwidth，如若有，也可通过它获取到宽度，比如：var w1 = $('.layui-table-total tr td[data-field="ID"]').attr('data-minwidth');
var w1 = $('.layui-table-total tr td[data-field="school"]').outerWidth(true); // 获取到合计里第一列的宽度（‘校区’）
var w2 = $('.layui-table-total tr td[data-field="dement"]').outerWidth(true); // 获取到合计里第二列的宽度（‘部门’）
var w3 = $('.layui-table-total tr td[data-field="position"]').outerWidth(true); // 获取到合计里第三列的宽度（‘职位’）
var w4 = $('.layui-table-total tr td[data-field="real_name"]').outerWidth(true); // 获取到合计里第四列的宽度（‘姓名’）
console.log(w1);
console.log(w2);
console.log(w3);
console.log(w4);
var total_width = w1+w2+w3+w4; // 获取到总计里固定定位的单元格的总宽度
console.log(total_width)
// 给td都加上背景色，这样z-index才起作用
$('.layui-table-total tr td').css('background-color','#F2F2F2');
// 将合计里的前四列固定定位
$('.layui-table-total tr td[data-field="school"]').css({'position':'fixed','z-index':'1'});
$('.layui-table-total tr td[data-field="dement"]').css({'position':'fixed','z-index':'1','padding-left':w1});
$('.layui-table-total tr td[data-field="position"]').css({'position':'fixed','z-index':'1','padding-left':w1+w2});
$('.layui-table-total tr td[data-field="real_name"]').css({'position':'fixed','z-index':'2','padding-left':w1+w2+w3}); // 因为里面有文字”合计“，所以要把它的z-index设得高于合计里其它固定定位的列
// 给合计里第五列（‘时间’）设置padding-left值
$('.layui-table-total tr td[data-field="time"]').css({'padding-left':total_width});

大功告成啦~