layui.table表格实现底部固定两行合计行
layui文档好像只能设置固定一行,所以就利用js添加css样式来修改它,使其固定两行,那么这两行的数据就需要后端返回。
<!--样式--> <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>