halo,下伙伴们,今天小编记录个关于layui开发的系统,layui.table表格实现底部固定两行(如:本页合计,全部合计)
小编查阅layui文档好像只能设置固定一行,所以就利用js添加css样式来修改它,使其固定两行,那么这两行的数据就需要后端返回,话不多说,上代码:
html
<!--样式-->
<style>
.layui-table-fixed-bottom {
position: sticky;
bottom: 0;
background-color: #f2f2f2;
}
.layui-table-fixed-bottom2 {
position: sticky;
bottom: 36px;
background-color: #f2f2f2;
}
</style>
<!--表格标签-->
<table id="grid" class="layui-hide" lay-filter="grid"></table>
<!--js-->
<script>
grid = table.render({
elem: '#grid',
id:"grid",
url: '',//你的请求地址
method:'POST',
contentType:'application/json;charset=UTF-8',
where:{},//请求参数
cols:cols,
page: {limit: 20 },
// 将底部两行固定在底部
done: function() {
var tableContainer = document.querySelector('.table-container');
var lastRows = tableContainer.querySelectorAll('.layui-table-body tbody tr:last-child');
if (lastRows.length > 1) {
lastRows[lastRows.length - 2].classList.add('layui-table-fixed-bottom');
lastRows[lastRows.length - 1].classList.add('layui-table-fixed-bottom');
//修改第二列的文本
lastRows[1].childNodes[1].innerText = '所有合计'
lastRows[0].childNodes[2].innerText = '--'
lastRows[0].childNodes[lastRows[0].childNodes.length-1].innerText = '--'
}
var lastRows2 = tableContainer.querySelectorAll('.layui-table-body tbody tr:nth-last-child(2)');
if (lastRows2.length > 1) {
lastRows2[lastRows2.length - 2].classList.add('layui-table-fixed-bottom2');
lastRows2[lastRows2.length - 1].classList.add('layui-table-fixed-bottom2');
lastRows2[1].childNodes[1].innerText = '本页合计'
lastRows2[0].childNodes[2].innerText = '--'
lastRows2[0].childNodes[lastRows2[0].childNodes.length-1].innerText = '--'
}
}
});
</script>
好啦,以上是用layui.table渲染完成后对行列进行js来添加样式和修改标签文案的,如果小伙伴们有其他方法麻烦在下方评论告诉下小编哦~