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

本文介绍在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的属性就可以得出计算的总和了

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值