layui开启子级表头&自动计算合计
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的属性就可以得出计算的总和了