layui表格 后端统计汇总 前端呈现的技术实现

最新推荐文章于 2024-07-05 14:06:08 发布
最新推荐文章于 2024-07-05 14:06:08 发布
阅读量714 收藏
点赞数
分类专栏： 前端技术 文章标签： 前端 layui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/interestingly/article/details/134686225
版权

ref:table 数据表格文档 - Layui

layui的table组件自带汇总统计的功能，但是这个统计只能做当前页的统计，无法做跨页面的汇总统计。这里给出一种基于后端进行统计，前端进行呈现的方案

1.后端返回数据demo,这里进行了分页，result是分页数据，totalrow是汇总行，code是状态码(table默认0是成功)，count是总计记录数

{
    "result": [
        {
            "id": 17,
            "code": "KFP20231123172337819",
            "typeA": null,
            "typeB": null,
            "department": "运营中心",
            "orgA": "如约数据科技有限公司",
            "orgB": "张东建",
            "orgid": null,
            "personid": 1580,
            "title": "张东建",
            "isTemp": 0,
            "TotalAmount": 100.00,
            "TotalInvoice": 0.00,
            "ReverseAmount": 0.00,
            "ReturnedAmount": 0.00,
            "TransferInAmount": 0.00,
            "TransferOutInAmount": 0.00,
            "BalanceAmount": 0.00,
            "month": null,
            "content": null,
            "saleman": "肖腾",
            "tel": "13318730345",
            "settlement": null,
            "deadline": 60,
            "needaudit": 1,
            "invoiceregisttime": null,
            "estimatetime": null,
            "remark": null,
            "nextplan": null,
            "createtime": "\/Date(1700731637000)\/"
        },
        {
            "id": 16,
            "code": "KFP20231123170649038",
            "department": null,
            "orgA": "如约数据科技有限公司",
            "orgB": "广州市第三建筑工程有限公司",
            "personid": null,
            "title": "广州市第三建筑工程有限公司",
            "isTemp": 0,
            "TotalAmount": 6000.00,
            "TotalInvoice": 0.00,
            "ReverseAmount": 0.00,
            "ReturnedAmount": 0.00,
            "TransferInAmount": 0.00,
            "TransferOutInAmount": 0.00,
            "saleman": "肖腾(13318730345)",
            "tel": "13318730345",
            "deadline": 0,
            "needaudit": 1,
            "createtime": "\/Date(1700730663000)\/",
            "typeA": "外部单位",
            "typeB": "市国资委(研发、运营)",
            "orgid": 1952,
            "month": "2023年11月-2024年3月",
            "invoiceregisttime": null,
            "estimatetime": null,
            "remark": null,
            "nextplan": null,
            "content": null,
            "settlement": null,
            "BalanceAmount": 0.00
        },
        {
            "id": 15,
            "code": "KFP20231123151447117",
            "department": null,
            "orgA": "如约数据科技有限公司",
            "orgB": "广州市第三建筑工程有限公司",
            "personid": null,
            "title": "广州市第三建筑工程有限公司",
            "isTemp": 1,
            "TotalAmount": 30000.00,
            "TotalInvoice": 30000.00,
            "ReverseAmount": 0.00,
            "ReturnedAmount": 1.00,
            "TransferInAmount": 5000.00,
            "TransferOutInAmount": 0.00,
            "saleman": null,
            "tel": "13318730345",
            "deadline": 0,
            "needaudit": 1,
            "createtime": "\/Date(1700723763000)\/",
            "typeA": null,
            "typeB": null,
            "orgid": 1952,
            "month": "202312",
            "invoiceregisttime": "\/Date(1700409600000)\/",
            "estimatetime": null,
            "remark": null,
            "nextplan": null,
            "content": null,
            "settlement": null,
            "BalanceAmount": -24999.00
        },
        {
            "id": 14,
            "code": "KFP20231123085015370",
            "department": null,
            "orgA": "如约数据科技有限公司",
            "orgB": "广州市第三建筑工程有限公司",
            "personid": null,
            "title": "广州市第三建筑工程有限公司",
            "isTemp": 0,
            "TotalAmount": 3000.00,
            "TotalInvoice": 3000.00,
            "ReverseAmount": 0.00,
            "ReturnedAmount": 0.00,
            "TransferInAmount": 0.00,
            "TransferOutInAmount": 0.00,
            "saleman": "肖腾(13318730345)",
            "tel": "13318730345",
            "deadline": 0,
            "needaudit": 1,
            "createtime": "\/Date(1700700699000)\/",
            "typeA": "外部单位",
            "typeB": "市国资委(研发、运营)",
            "orgid": 1952,
            "month": null,
            "invoiceregisttime": "\/Date(1700496000000)\/",
            "estimatetime": "\/Date(1700582400000)\/",
            "remark": "客户放假",
            "nextplan": "假期后联系",
            "content": null,
            "settlement": null,
            "BalanceAmount": -3000.00
        },
        {
            "id": 13,
            "code": "KFP20231121202046164",
            "department": null,
            "orgA": "如约数据科技有限公司",
            "orgB": "广州市第三建筑工程有限公司",
            "personid": null,
            "title": "广州市第三建筑工程有限公司",
            "isTemp": 0,
            "TotalAmount": 5000.00,
            "TotalInvoice": 5000.00,
            "ReverseAmount": 5000.00,
            "ReturnedAmount": 5000.00,
            "TransferInAmount": 0.00,
            "TransferOutInAmount": 5000.00,
            "saleman": "肖腾(13318730345)",
            "tel": "13318730345",
            "deadline": 0,
            "needaudit": 1,
            "createtime": "\/Date(1700569286000)\/",
            "typeA": "外部单位",
            "typeB": "市国资委(研发、运营)",
            "orgid": 1952,
            "month": "手动阀手动阀",
            "invoiceregisttime": "\/Date(1700496000000)\/",
            "estimatetime": null,
            "remark": null,
            "nextplan": null,
            "content": null,
            "settlement": null,
            "BalanceAmount": 0.00
        },
        {
            "id": 12,
            "code": "KFP20231121173133801",
            "department": null,
            "orgA": "如约数据科技有限公司",
            "orgB": "广州市第三建筑工程有限公司",
            "personid": null,
            "title": "广州市第三建筑工程有限公司",
            "isTemp": 0,
            "TotalAmount": 3000.00,
            "TotalInvoice": 3000.00,
            "ReverseAmount": 3000.00,
            "ReturnedAmount": 0.00,
            "TransferInAmount": 0.00,
            "TransferOutInAmount": 0.00,
            "saleman": "肖腾(13318730345)",
            "tel": "13318730345",
            "deadline": 0,
            "needaudit": 1,
            "createtime": "\/Date(1700559151000)\/",
            "typeA": "外部单位",
            "typeB": "市国资委(研发、运营)",
            "orgid": 1952,
            "month": null,
            "invoiceregisttime": "\/Date(-62135596800000)\/",
            "estimatetime": null,
            "remark": null,
            "nextplan": null,
            "content": null,
            "settlement": null,
            "BalanceAmount": 0.00
        },
        {
            "id": 11,
            "code": "KFP20231121172736180",
            "department": null,
            "orgA": "如约数据科技有限公司",
            "orgB": "广州市第三建筑工程有限公司",
            "personid": null,
            "title": "广州市第三建筑工程有限公司",
            "isTemp": 0,
            "TotalAmount": 0.00,
            "TotalInvoice": 0.00,
            "ReverseAmount": 0.00,
            "ReturnedAmount": 0.00,
            "TransferInAmount": 0.00,
            "TransferOutInAmount": 0.00,
            "saleman": "肖腾(13318730345)",
            "tel": "13318730345",
            "deadline": 0,
            "needaudit": 1,
            "createtime": "\/Date(1700558911000)\/",
            "typeA": "外部单位",
            "typeB": "市国资委(研发、运营)",
            "orgid": 1952,
            "month": null,
            "invoiceregisttime": null,
            "estimatetime": null,
            "remark": null,
            "nextplan": null,
            "content": null,
            "settlement": null,
            "BalanceAmount": 0.00
        },
        {
            "id": 1,
            "code": "YY2021060300001",
            "department": "运营中心",
            "orgA": "广州如约数据科技有限公司",
            "orgB": "常德中车新能源汽车有限公司",
            "personid": null,
            "title": "常德中车新能源汽车有限公司",
            "isTemp": 0,
            "TotalAmount": 196760.73,
            "TotalInvoice": 196760.73,
            "ReverseAmount": 0.00,
            "ReturnedAmount": 196760.73,
            "TransferInAmount": 0.00,
            "TransferOutInAmount": 0.00,
            "saleman": null,
            "tel": "15876584149",
            "deadline": 60,
            "needaudit": 0,
            "createtime": "\/Date(1698221761000)\/",
            "typeA": null,
            "typeB": null,
            "orgid": 1906,
            "month": "202106",
            "invoiceregisttime": null,
            "estimatetime": null,
            "remark": null,
            "nextplan": null,
            "content": "安全带项目11",
            "settlement": "打法",
            "BalanceAmount": 0.00
        },
        {
            "id": 2,
            "code": "YY2021060300002",
            "department": "运营中心",
            "orgA": "广州如约数据科技有限公司",
            "orgB": "常德中车新能源汽车有限公司",
            "personid": null,
            "title": "常德中车新能源汽车有限公司",
            "isTemp": 0,
            "TotalAmount": 196760.73,
            "TotalInvoice": 196760.73,
            "ReverseAmount": 0.00,
            "ReturnedAmount": 196760.73,
            "TransferInAmount": 0.00,
            "TransferOutInAmount": 0.00,
            "saleman": "如约用户",
            "tel": "15876584149",
            "deadline": 60,
            "needaudit": 0,
            "createtime": "\/Date(1698221761000)\/",
            "typeA": "外部单位",
            "typeB": "私人单位",
            "orgid": 1906,
            "month": "202106",
            "invoiceregisttime": null,
            "estimatetime": null,
            "remark": null,
            "nextplan": null,
            "content": "安全带项目",
            "settlement": null,
            "BalanceAmount": 0.00
        },
        {
            "id": 3,
            "code": "YY2021060300003",
            "department": "运营中心",
            "orgA": "广州如约数据科技有限公司",
            "orgB": "常德中车新能源汽车有限公司",
            "personid": null,
            "title": "常德中车新能源汽车有限公司",
            "isTemp": 0,
            "TotalAmount": 196760.73,
            "TotalInvoice": 196760.73,
            "ReverseAmount": 0.00,
            "ReturnedAmount": 196760.73,
            "TransferInAmount": 0.00,
            "TransferOutInAmount": 0.00,
            "saleman": "如约用户",
            "tel": "15876584149",
            "deadline": 60,
            "needaudit": 0,
            "createtime": "\/Date(1698221761000)\/",
            "typeA": "外部单位",
            "typeB": "私人单位",
            "orgid": 1906,
            "month": "202106",
            "invoiceregisttime": null,
            "estimatetime": null,
            "remark": null,
            "nextplan": null,
            "content": "安全带项目",
            "settlement": null,
            "BalanceAmount": 0.00
        }
    ],
    "totalRow": {
        "id": 0,
        "code": null,
        "department": null,
        "orgA": null,
        "orgB": null,
        "personid": null,
        "title": null,
        "isTemp": 0,
        "TotalAmount": 834142.92,
        "TotalInvoice": 828042.92,
        "ReverseAmount": 8000.00,
        "ReturnedAmount": 701762.73,
        "TransferInAmount": 5000.00,
        "TransferOutInAmount": 5000.00,
        "saleman": null,
        "tel": null,
        "deadline": 0,
        "needaudit": 0,
        "createtime": "\/Date(-62135596800000)\/",
        "typeA": null,
        "typeB": null,
        "orgid": null,
        "month": null,
        "invoiceregisttime": null,
        "estimatetime": null,
        "remark": null,
        "nextplan": null,
        "content": null,
        "settlement": null,
        "BalanceAmount": -118280.19
    },
    "code": 1,
    "count": 11,
    "detailMessage": null,
    "message": null
}

2.前端解析json，parseData是layui表格组件的异步请求回调解析的方法，后端返回的json不一定符合table解析数据的格式要求，通过该方法转换成table组件的标准格式

parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.detailMessage,
                    "count": res.count,
                    "data": res.result,
                    "totalRow": res.totalRow
                }
            },

3.列表渲染，主要有两个，第一在render时设置totalRow: true，第二就是在需要统计的col设置totalRow: true

cols: [[ //表头

                { field: 'code', title: '自编号', align: 'center', width: 100, totalRowText: '合计：', templet:'<div><a href="/Finance/Edit?id={{d.id}}" title="编辑应回款" class="layui-table-link tablink">{{d.code}}</a></div>' },
                { field: 'department', title: '所属中心', align: 'center', width: 100 },
                { field: 'typeA', title: '分类1', align: 'center', width: 100 },
                { field: 'typeB', title: '分类2', align: 'center', width: 100 },
                { field: 'orgA', title: '销售方', align: 'center', width: 150 },
                { field: 'orgB', title: '客户方', align: 'center', width: 150 },
                { field: 'title', title: '开票单位', align: 'center', width: 150 },
                { field: 'TotalAmount', title: '应收金额', align: 'center', width: 100, totalRow: true },
                { field: 'TotalInvoice', title: '开票金额', align: 'center', width: 100, totalRow: true },
                { field: 'ReverseAmount', title: '冲红金额', align: 'center', width: 100, totalRow: true },
                { field: 'ReturnedAmount', title: '已回款金额', align: 'center', width: 100, totalRow: true },
                { field: 'TransferInAmount', title: '转结金额(转入)', align: 'center', width: 100, totalRow: true },
                { field: 'TransferOutInAmount', title: '转结金额(转出)', align: 'center', width: 100, totalRow: true },
                {
                    field: 'BalanceAmount',title: '待回款金额', align: 'center', width: 100
                },
                { field: 'month', title: '款项所属期', align: 'center', width: 100 },
                { field: 'content', title: '款项内容', align: 'center', width: 150 },
                { title: '款项追缴人', align: 'center', width: 150, templet: function (d) { return d.saleman + '(' + d.tel + ')'; } },
                { field: 'settlement', title: '结算方式', align: 'center', width: 100 },
                { field: 'deadline', title: '回款限期', align: 'center', width: 100 },
                {
                    field: 'needaudit', title: '开票是否审核', align: 'center', width: 100, templet: function (d) {
                        if (d.needaudit == 1)
                            return "是";
                        else
                            return "否";
                    }
                },
                {
                    field: 'invoiceregisttime', title: '开票时间', align: 'center', width: 100, templet: function (d) {
                        if (d.invoiceregisttime != null) {
                            var timestamp = d.invoiceregisttime.replace(/\D/igm, "");
                            var date = new Date(parseInt(timestamp));
                            return util.toDateString(date, 'yyyy-MM-dd')
                        } else {
                            return "";;
                        }
                    }
                },
                {
                    field: 'estimatetime', title: '预计回款时间', align: 'center', width: 100, templet: function (d) {
                        if (d.estimatetime != null) {
                            var timestamp = d.estimatetime.replace(/\D/igm, "");
                            var date = new Date(parseInt(timestamp));
                            return util.toDateString(date, 'yyyy-MM-dd')
                        } else {
                            return "";
                        }
                    }
                },
                { field: 'remark', title: '未回款原因', align: 'center', width: 150 },
                { field: 'nextplan', title: '下一步计划', align: 'center', width: 150 },
                { title: '操作', align: 'center', toolbar: '#controls', width: "440", fixed: "right" },
            ]]

3.效果

孤心浪女
关注
专栏目录
Layui表格数据的计算
weixin_57784983的博客
06-08 2511
layui数据计算
Layui 2.5.6 合计总数据(不是单独一页的数据)
YIYIYIPEI的博客
11-20 1460
巧用Layui新版本合计功能一、业务需求二、查看官方文档三、具体操作(后端)四、具体操作(前端) 一、业务需求 现有一个需求是： 计算当前所有引导员的来访者数量总合计以及有效来访者数量的总合计 由于项目前端用的是Layui框架，所以打算直接利用前端框架完成总合计的计算 需求图片: 二、查看官方文档 layui官方文档表明：2.5.6版本上更新了组件中的合计行 文档表示：需要后端接口将返回的合计的总数量返给前端 三、具体操作(后端) 原有的查询列表接口返回类型： return ResultUtil.s
Web Echarts+layui 统计图表demo实例 (统计深圳市旅游景点信息)
10-14
使用Echarts+layui+html 开发数据统计图表，demo中统计的数据是深圳市旅游景点分析统计，内有深圳地图统计，饼图统计，柱状图统计，漏斗图统计，玫瑰饼图统计等图形展示
vue表单增加合计
最新发布
qq_43048011的博客
07-05 751
将 show-summary 设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。缺点：只能统计当前页的数据，所有数据合计无法做到。
Django让web开发更简单（四）：设计视图
weixin_43431593的博客
10-01 370
Views views，即视图，用于处理业务逻辑，整合前端请求、数据处理和响应。可以先看看我的另一篇文章进行了解：https://blog.csdn.net/weixin_43431593/article/details/107142415
Layui 数据表格 统计字段,非当前页
weixin_45204847的博客
07-06 884
1. layui统计当前页的某字段数量，需要两步 var insTb = common.table.init({ elem: '#inventoryTable', url: prefix + "/list", id: 'inventoryTable', toolbar: '#inventoryToolBar', modalName: "库存数量", .
layui.table的总结
qq_45050083的博客
06-23 397
layui.table 1.创建一个table实例，<table id ="demo1>,然后通过table.render()方法指定该容器。且该方式是方法渲染。 2. col: （1）方法渲染：表头参数在数组里 （2）自动渲染：表头参数在标签里 templet: 对某列添加其他元素，例如删除、编辑。 template:function(e){ // e:接口返回的所有字段和数据 } 3.defaultToolbar::头部工具栏右侧的图标和按钮，默认:[‘filter’,‘export’,‘p
layui动态表头的实现代码
10-16
这段JavaScript代码展示了如何根据后端返回的列名动态创建layui表格的列。`data.columns`和`data.rows`分别代表从后端获取的列定义和行数据。 总结来说，实现layui动态表头的关键在于后端生成动态SQL查询，获取适应...
E9利用layui实现流程超时表格
09-06
"E9利用layui实现流程超时表格" 以下是根据给定的文件信息生成的相关知识点： layui和泛微 layui是一个流行的前端框架，提供了许多实用的UI组件和功能模块。泛微是一款流程管理系统，提供了强大的工作流引擎和...
layui 简单实现 TABLE 分页功能
08-08
layui 是一款轻量级的前端框架，以其简洁的API和丰富的组件库深受开发者喜爱。在网页开发中，数据展示往往需要配合分页功能，以提高用户体验和加载速度。本篇文章将详细讲解如何使用 layui 实现 TABLE 的分页功能。 ...
layui合计功能
小叶
02-27 2778
今天就来给大家讲一下我在做项目中遇到的问题，项目中有这样一个效果，选中一些商品，然后的单价都加起来，显示所有选中的商品单价的累计消费。首先看一下它的代码，它是怎么使用的。如下图所示： 首先我们需要给他开启该列的自动合计功能，也就是说哪一列需要合计一些数据的就在那一列上面添加totalRow:true这个参数。前提是你必须在前面写一个开启自动合计功能的是参数totalRow:true。接下来就是totalRowText：””这个参数；你也可以不用写上totalRowText这个参数，可写可不写。它的功能就是
SpringBoot+ layui +Echarts整合图表实例（统计港口收入预估数据走势）
12-07
使用SpringBoot+layui +Echarts开发数据统计图表（柱形图，饼图，折现图）案例中统计的数据是港口生产作业收入分析统计走势。
php layui table,layui table 相关问题汇总
weixin_31596631的博客
03-18 261
1、表格内容自动换行完美解决默认情况下，layui table表格内容超出表格宽度会自动省略号隐藏需要鼠标放到单元格上，出现次图标然后再点击，才会显示全部，用起来不方便解决方法：未页面添加css，便可解决.layui-table-cell{font-size:14px;padding:05px;height:auto;overflow:visible;text-overflow:inherit...
layui 表格 统计某一列的数据总和
小寒风的
09-29 1777
请求数据的地方添加 totalRow:true 然后在你需要求和的数据列添加 totalRow:true 要被统计的列
Layui-数据表格
weixin_54668937的博客
12-09 690
Layui-数据表格 文献种类：专题技术文献； 开发工具与关键技术： VS、JS、MVC 作者：方建恒 ；年级：20级 ；撰写时间： 2021 年 11 月 28日 我们在制作一些和电商、金融等数据表格的时候， 通常会在表格下面进行数值的统计，以及数据的自动排序。 在这里我们会用到layui里的数据表格功能， 这样我们可以快速便捷的完成我们想要的功能。 我们首先把JQuery的文件以及layui的脚本文件和叠成样式表引入， 然后创建一个动态表格并获取到数据， （关于动态表格数据的获取我
LayUi 之 数据表格
李先生的技术博客
07-12 2094
我们在平常做项目的过程中，如果想使用数据表格的话，一般都是动态数据的处理，而且一般如果我们数据表格不加分页的话，还是很容易做的，但是加了数据表格的话，如果是前端分页，那也好说，后端分页就需要寻求工具类了，所以，在这里，我们也是以动态数据举栗子 首先第一种，通过前台传过去的URL从后台获取数据，这种后台获取数据如果需要分页的话，就必须需要后台的分页工具类做支持，上栗子~ 这...
layui 分页 固定底部_论layui的使用体验
weixin_39603613的博客
11-28 1904
layui这个东西有收费跟免费版本，当然我在工作当中用的是免费的版本。至于说我为什么要用这个东西了？原因是这样的，当时我们用的是datatables，由于前期工作上没有相关的需求说是要什么表格相关列固定啊，自动统计啊，可以左右滑动啊，等等原因。所以用datatables还是用的比较爽！但也有可能是我并不熟悉这个东西的相关的高级功能。我想的话，大概是这个东西是国外人搞的，中文相关的文档...
layui 数据表格 每列的合计功能实现
qq_51110402的博客
08-30 2026
提示：这是layui 官方的 合计方式，网上也有其他的合计方式 ，这种合计对初学者来说很友好。
【JAVA】查询数据返回时自动进行汇总统计，适用于LayUI表格需要统计的查询
qq_28139345的博客
05-21 548
查询数据返回时自动进行汇总统计，适用于LayUI表格需要统计的查询 · java spring boot 查询报表数据时自动进行数据统计Code，主要适用LayUI表格需要统计汇总时，其它情况也可适应，主要看需求，按需调整。 数据返回类 import com.central.common.utils.CommonUtils; import lombok.Data; import java.util.List; /** * layUI 统计表格专用数据返回结果集，自动计算合计 * @Auther
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值