数据表格之合计
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术:Visual Studio 2015、totalRow合计
作者: 梁柏源
撰写时间:2019/6/1
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
记得上次讲了table数据表格的多级表头的设置,这次就讲另一个数据表格的合计,和上次讲多级表头的rowspan、colspan一样。这次的主角也是两个它们分别是totalRowText和totalRow,它们都是“合计”这一功能的重点。是不是很简单一眼就可以看出是啥意思了(假的,只能分一下哪个是文本的),但是还是得走流程介绍一下它们的功能的。
- totalRow:指的是是否开启该列的自动合计行区域,一般默认为:false,用的时候得改成true(大家都懂);
- totalRowText:指的是显示自定义的合计文本,举个例子:比如数据表格中合计的那一行的表头我不想叫它“合计”(“合计”是这样来的totalRowText:“合计”)而是“总金额”的话,就得这样写totalRowText:“总金额”。
好的,接下来直接看代码:
$(document).ready(function () {
layui.use(['layer','table'], function () {
layer = layui.layer,
layuiTable = layui.table;
TabInfor = layuiTable.render({
elem: '#id,
toolbar: '#toolbarDemo',
totalRow:true,//开启合计
url:'',//路径
data: [],//加载数据
cols: [[
{ title: '序号', type: 'numbers', totalRowText:"合计" },//totalRowText:"合计"//自定义合计文本
{ title: '票号', field: ' TicketNumber', align: 'center' },
{ title: '姓名', field: 'Name', align: 'center', width: '8%' },
{ title: '性别', field: 'Sex', align: 'center', width: '5%' },
{ title: '航班', field: 'Flight ', align: 'center' },
{ title: '金钱', field: 'Money', align: 'center', totalRow: true, },//totalRow: true,//要开启合计功能的列
]],
page: {
limit: 12,
limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],
},
});
});
});
对于这个toolbar: '#toolbarDemo'本来是打算下次讲的,这里竟然遇到了就提前讲了,首先介绍一下:
(1) toolbar:开启表头头部工具栏区域的代码,有四种类型:
1、就是上面的那种,toolbar: '#toolbarDemo',自定义模板选择器;
2、toolbar:’<div></div>’是不是有点熟悉,它可以直接传入工具栏模板字符;
3、toolbar:true,只是开启工具栏,没啥意义,连显示左侧模板都没有;
4、toolbar: 'default' ,这个就是让工具栏左侧显示默认的内置模板
(2)defaultToolbar:和toolbar一起的,上面代码没有写到,这里补充一下,它的功能是自由配置头部工具栏右侧的图标有三种图标:
1、filter: 显示筛选图标;
2、exports: 显示导出图标;
3、print: 显示打印图标。
当然这里还能排序defaultToolbar: ['filter', 'print', 'exports'],你可以这样排defaultToolbar: ['exports', 'print', 'filter'],还可以这样排defaultToolbar: ['print', 'filter', 'exports'],各种看你兴趣爱好排列。而且需要自个就写几个,比如我只需要筛选和导出defaultToolbar: ['filter', 'exports'],就这样好了。
还有关于totalRow合计要注意以下两点:
(1)totalRowText 放的位置,最好能放在序列列中,而且在这之前要totalRow:true开启合计功能(这是前提哦!),然后在需要合计的列中加上totalRow: true就可以实现合计功能了
(2)该合计只统计当前页面显示数据,并不统计所有数据(页面显示所有数据(没有分页的那种)除外)。要显示所有数据,就得另为设置,这里不讲(其实是不会┭┮﹏┭┮,没事以后会的( ̄▽ ̄))。
来我们看一下图:
这里名字就不查询了(你懂的)