使合计行支持固定列

分享 未结 0 62
叶落阁
叶落阁 2019-9-11
悬赏:20飞吻
目前版本的 table 的 合计行 中的固定列并没有固定,导致横向滚动时,整条合计行都在滚动

官方示例: https://www.layui.com/demo/table/totalRow.html

我们可以打补丁,修复这个问题。
当然此修复功能已经集成到插件: soulTable 中,使用插件的小伙伴可以直接更新 soulTable.js 即可
在线测试用例:https://jsbin.com/noropal/8/edit?html,js,output
代码如下
table.render({
...
,done: function () {
fixTotal(this);
}
});
// 修复合计行固定列问题
function fixTotal (myTable) {
var $table = $(myTable.elem),
$total = $table.next().children('.layui-table-total');
if ($total.length > 0) {
var $tableBox = $table.next().children('.layui-table-box'),
$fixedLeft = $tableBox.children('.layui-table-fixed-l').children('.layui-table-body').children('table').children('tbody').children('tr:eq(0)').children('td'),
$fixedRight = $tableBox.children('.layui-table-fixed-r').children('.layui-table-body').children('table').children('tbody').children('tr:eq(0)').children('td'),
html = [];

if ($fixedLeft.length > 0) {
$table.next().find('style').append('.layui-table-total-fixed-l .layui-table-patch{display: none}');
$table.next().css('position', 'relative');
html.push('<table style="position: absolute;background-color: #fff;left: 0;top: '+ ($total.position().top + 1) +'px" cellspacing="0" cellpadding="0" border="0" class="layui-table layui-table-total-fixed layui-table-total-fixed-l"><tbody><tr>');
$fixedLeft.each(function () {
if ($(this).data('key')) {
html.push($total.children('table:eq(0)').find('[data-key="' + $(this).data('key') + '"]').prop("outerHTML"))
}
})
html.push('</tr></tbody></table>');
$total.append(html.join(''))
}
if ($fixedRight.length > 0) {
$table.next().find('style').append('.layui-table-total-fixed-r td:first-child{border-left:1px solid #e6e6e6}.layui-table-total-fixed-r td:last-child{border-left: none}');
$table.next().css('position', 'relative');
html = [];
html.push('<table style="position: absolute;background-color: #fff;right: 0;top: '+ ($total.position().top + 1) +'px" cellspacing="0" cellpadding="0" border="0" class="layui-table layui-table-total-fixed layui-table-total-fixed-r"><tbody><tr>');
$fixedRight.each(function () {
html.push($total.children('table:eq(0)').find('[data-key="' + $(this).data('key') + '"]').prop("outerHTML"))
})
html.push('</tr></tbody></table>')
$total.append(html.join(''))
}
}
}
回帖
  • 消灭零回复