数据表格之合计

数据表格之合计

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Visual Studio 2015、totalRow合计

作者： 梁柏源

撰写时间：2019/6/1

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

记得上次讲了table数据表格的多级表头的设置，这次就讲另一个数据表格的合计，和上次讲多级表头的rowspan、colspan一样。这次的主角也是两个它们分别是totalRowText和totalRow，它们都是“合计”这一功能的重点。是不是很简单一眼就可以看出是啥意思了（假的，只能分一下哪个是文本的），但是还是得走流程介绍一下它们的功能的。

1. totalRow：指的是是否开启该列的自动合计行区域，一般默认为：false，用的时候得改成true（大家都懂）；
2. 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）该合计只统计当前页面显示数据，并不统计所有数据（页面显示所有数据（没有分页的那种）除外）。要显示所有数据，就得另为设置，这里不讲（其实是不会┭┮﹏┭┮，没事以后会的(￣▽￣)）。

来我们看一下图：

这里名字就不查询了（你懂的）