【layui】layui.table表格实现底部固定两行合计行

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来添加样式和修改标签文案的,如果小伙伴们有其他方法麻烦在下方评论告诉下小编哦~

相关推荐
北海-cherish31 分钟前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
AALoveTouch1 小时前
网球馆自动预约系统的反调试
javascript·网络
新中地GIS开发老师3 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang3 小时前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。3 小时前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
李白的故乡3 小时前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_3 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含3 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
你的人类朋友4 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手4 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue