数据表格之合计

本文介绍了在Visual Studio 2015中利用layui框架的totalRow和totalRowText属性实现数据表格的合计功能。讲解了如何自定义合计文本和开启合计行,以及注意事项,包括totalRowText的位置和合计数据的统计范围。示例代码展示了具体的实现过程。

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

数据表格之合计

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

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

作者: 梁柏源

撰写时间: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)该合计只统计当前页面显示数据,并不统计所有数据(页面显示所有数据(没有分页的那种)除外)。要显示所有数据,就得另为设置,这里不讲(其实是不会┭┮﹏┭┮,没事以后会的( ̄▽ ̄))。

来我们看一下图:

这里名字就不查询了(你懂的)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值