layui开启子级表头&自动计算合计

最新推荐文章于 2025-05-13 16:11:41 发布

昵称~

最新推荐文章于 2025-05-13 16:11:41 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：后台

本文链接：https://blog.youkuaiyun.com/qq_42577408/article/details/94862903

后台专栏收录该内容

31 篇文章

订阅专栏

本文介绍在Layui插件中如何使用子级表头(rowspan和colspan)创建复杂表头，并展示如何配置表格自动计算合计行，包括计划收款金额、已收金额等字段的总和。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui开启子级表头&自动计算合计

 开发工具与关键技术：Vs
 作者：蛋蛋；
 撰写时间：2019/07/7

在使用Layui插件渲染表格一般都是表头固定的样式；那么什么是子级表头？（复杂表头）
在html中标签定义 HTML 表格中的标准单元格。　　
(1)rowspan 属性规定单元格可横跨的行数;
(2)colspan 属性规定单元格可横跨的列数。
在这里插入图片描述

或者是不在静态表格直接在数据表格里面添加属性
{field: ‘username’, title: ‘联系人’, width: 80, rowspan: 2} //rowspan即纵向跨越的单元格数
{align: ‘center’, title: ‘地址’, colspan: 3} //colspan即横跨的单元格数，这种情况下不用设置field和width

layui表格自动开启合计行合计：是需要对应的数字相加得出的结果；
在这里插入图片描述
如图实例：我需要计算出该表格当中的（计划收款金额）、（已收金额）、（未收金额）、（本次收款金额）等字段分别的总和
cols: [[//表头
{ field: “FundName”, title: “款项名称”,align: “center” },
{ field: “PayFund”, title: “款项类型”,align:“center”, totalRowText: “合计:”},
{ field: “PlanReceiptSum”, title: “计划收款金额”, align: “center”, totalRow: true },
{ field: “CollectSum”, title: “已收金额”, align: “center”, totalRow: true },
{ field: “NotHarvestSum”, title: “未收金额”, align: “center”, totalRow: true },
{ field: “ActualReceiptSum”,title:“本次收款金额(本金)*”, totalRow: true },
]],
totalRow: true, //必须写否则不显示视图效果
page: {
imit: 2,//指定每页显示的条数
limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项
},
TotalRowText:用于显示自定义的合计文本；

可根据所需放置对应的位置TotalRow ：是否开启该列的自动合计功能，一般默认是false;但是反之是true就直接开启了，然后你需要哪一列显示数量的总和就在数据表格当中加上该属性即可
在这里插入图片描述
如图：在数据表格当中是在对应的款项类型这一列加上了TotalRowText 来显示“合计”；后面的字段就直接使用layui的属性就可以得出计算的总和了