前端UI框架ligerui表格汇总功能无法计算全部数据的合计的解决方法

jQuery LigerUI - 快速开发UI框架 - 演示系统

想做一个工资表，下面带各列数据的汇总，恰巧ligerui有汇总功能，但是只能对当前页面显示数据求和，毕竟前台js计算数据不是强项，还是应该post从后台取汇总数据。

先看看js代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE HTML>
<html>
<head><title>表格控件 - 固定列</title><link href="${pageContext.request.contextPath}/static/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css"><script src="${pageContext.request.contextPath}/static/jquery/jquery-1.9.0.min.js" type="text/javascript"></script><script src="${pageContext.request.contextPath}/static/ligerUI/js/core/base.js" type="text/javascript"></script><script src="${pageContext.request.contextPath}/static/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script><script src="${pageContext.request.contextPath}/static/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script><script src="${pageContext.request.contextPath}/static/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script><script src="${pageContext.request.contextPath}/static/CustomersData.js" type="text/javascript"></script><script type="text/javascript">var g;let test;$(function (){$.post("${pageContext.request.contextPath}/book/salaryobj",function (data) {//console.log(data)const data1 = JSON.parse(data);//const data1 = {Rows:obj,totalvalue:1001}console.log(data1)g = $("#maingrid4").ligerGrid({columns: [{display: '编号', name: 'personID', width: 60, frozen: true, totalSummary:{//type: 'count'render: function (sum, column, cell){return '<div>总数:' + data1.Total.personID + '</div>';}}} ,//align: 'left',{ display: '姓名', name: 'name', width: 60, frozen: true }, //minWidth{ display: '部门', name: 'department', width: 90, frozen: true }, //, frozen: true , align: 'left'{ display: '年', name: 'yyyy', width: 60 , frozen: true },//, align: 'left'{ display: '月', name: 'mm', width: 60, frozen: true }, //, align: 'left' , frozen: true{ display: '日', name: 'dd', width: 60, frozen: true, totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>合计:</div>';}}},{ display: '基本工资', name: 'base', width: 90, totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.base + '</div>';}}},{ display: '岗位工资', name: 'post', width: 90, totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.post + '</div>';}}},{ display: '工龄工资', name: 'workingAge', width: 90, totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.workingAge + '</div>';}}},{ display: '学历工资', name: 'education', width: 90, totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.education + '</div>';}}},{ display: '独生子女费', name: 'oneChild', width: 90 , totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.oneChild + '</div>';}}},{ display: '通讯费', name: 'communication', width: 90, totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.communication + '</div>';}}},{ display: '交通费', name: 'transportation', width: 90 , totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.transportation + '</div>';}}},{ display: '动态工资', name: 'dynamic', width: 90, totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.dynamic + '</div>';}}},{ display: '加班费', name: 'overTime', width: 90 , totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.overTime + '</div>';}}},{ display: '其他工资', name: 'other', width: 90, totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.other + '</div>';}}},{ display: '应发工资合计', name: 'amount', width: 90 , totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.amount + '</div>';}}},{ display: '社保基数', name: 'socialBase', width: 90, totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.socialBase + '</div>';}}},{ display: '公积金基数', name: 'fundBase', width: 90 , totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.fundBase + '</div>';}}},{ display: '医保基数', name: 'medicalBase', width: 90, totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.medicalBase + '</div>';}}},{ display: '养老保险', name: 'socialInsurance', width: 90 , totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.socialInsurance + '</div>';}}},{ display: '失业保险', name: 'unemploymentInsurance', width: 90, totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.unemploymentInsurance + '</div>';}}},{ display: '医疗保险', name: 'medicalInsurance', width: 90 , totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.medicalInsurance + '</div>';}}},{ display: '午餐费', name: 'lunch', width: 90, totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.lunch + '</div>';}}},{ display: '住房公积金', name: 'fund', width: 90 , totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.fund + '</div>';}}},{ display: '扣款合计', name: 'deduction', width: 90, totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.deduction + '</div>';}}},{ display: '个税专项扣除', name: 'taxFree', width: 90 , totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.taxFree + '</div>';}}},{ display: '应纳税所得额', name: 'taxBase', width: 90 , totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.taxBase + '</div>';}}},{ display: '个人所得税', name: 'tax', width: 90, totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.tax + '</div>';}}},{ display: '实发工资1', name: 'salary1', width: 90 , totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.salary1 + '</div>';}}},{ display: '工会会费', name: 'dues', width: 90, totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.dues + '</div>';}}},{ display: '实发工资2', name: 'salary2', width: 90, totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.salary2 + '</div>';}}},{ display: '备注', name: 'remark', width: 300},], data: data1, pageSize: 20, sortName: 'personID', // data: data1是数据的入口，把官网例子中CustomersData改成data1即可，排序sortName: 'personID'把原始例子的 CustomerID改为personIDwidth: '98%', height: '98%', checkbox: true,rownumbers:true,fixedCellHeight:false//, totalRender: renderFunction   totalRender功能我试了下不好使，不用这个功能});$("#pageloading").hide();// 这个函数是配套 totalRender功能的，没有用function renderFunction(data, currentPageData){return '总仓库数量:'+data.totalValue;}});});</script>
</head>
<body><h3><a href="${pageContext.request.contextPath}/">返回</a>
</h3><div class="l-loading" style="display: block" id="pageloading">
</div>
<div id="maingrid4" style="margin: 0; padding: 0">
</div>
<div style="display: none;">
</div></body>
</html>

json数据格式：

{"Rows":
[{"amount":100301.0,"base":50001.0,"communication":100.0,"dd":10,"deduction":91.2,"department":"网络运营部","dues":500.01,"dynamic":100.0,"education":0.0,"fund":28.0,"fundBase":400.0,"lunch":22.0,"medicalBase":400.0,"medicalInsurance":8.0,"mm":11,"name":"张三","oneChild":0.0,"other":0.0,"overTime":0.0,"personID":28,"post":50000.0,"salary1":100209.8,"salary2":99709.79,"socialBase":400.0,"socialInsurance":32.0,"tax":0.0,"taxBase":0.0,"taxFree":0.0,"transportation":100.0,"unemploymentInsurance":1.2,"workingAge":0.0,"yyyy":2021},
{"amount":100302.0,"base":50002.0,"communication":100.0,"dd":10,"deduction":91.2,"department":"网络运营部","dues":500.01,"dynamic":100.0,"education":0.0,"fund":28.0,"fundBase":400.0,"lunch":22.0,"medicalBase":400.0,"medicalInsurance":8.0,"mm":11,"name":"李四","oneChild":0.0,"other":0.0,"overTime":0.0,"personID":29,"post":50000.0,"salary1":100210.8,"salary2":99710.79,"socialBase":400.0,"socialInsurance":32.0,"tax":0.0,"taxBase":0.0,"taxFree":0.0,"transportation":100.0,"unemploymentInsurance":1.2,"workingAge":0.0,"yyyy":2021},
{"amount":100303.0,"base":50003.0,"communication":100.0,"dd":10,"deduction":91.2,"department":"网络运营部","dues":500.02,"dynamic":100.0,"education":0.0,"fund":28.0,"fundBase":400.0,"lunch":22.0,"medicalBase":400.0,"medicalInsurance":8.0,"mm":11,"name":"王五","oneChild":0.0,"other":0.0,"overTime":0.0,"personID":30,"post":50000.0,"salary1":100211.8,"salary2":99711.78,"socialBase":400.0,"socialInsurance":32.0,"tax":0.0,"taxBase":0.0,"taxFree":0.0,"transportation":100.0,"unemploymentInsurance":1.2,"workingAge":0.0,"yyyy":2021},
{"amount":100304.0,"base":50004.0,"communication":100.0,"dd":10,"deduction":91.2,"department":"网络运营部","dues":500.02,"dynamic":100.0,"education":0.0,"fund":28.0,"fundBase":400.0,"lunch":22.0,"medicalBase":400.0,"medicalInsurance":8.0,"mm":11,"name":"赵六","oneChild":0.0,"other":0.0,"overTime":0.0,"personID":31,"post":50000.0,"salary1":100212.8,"salary2":99712.78,"socialBase":400.0,"socialInsurance":32.0,"tax":0.0,"taxBase":0.0,"taxFree":0.0,"transportation":100.0,"unemploymentInsurance":1.2,"workingAge":0.0,"yyyy":2021},
{"amount":100305.0,"base":50005.0,"communication":100.0,"dd":10,"deduction":91.2,"department":"网络运营部","dues":500.03,"dynamic":100.0,"education":0.0,"fund":28.0,"fundBase":400.0,"lunch":22.0,"medicalBase":400.0,"medicalInsurance":8.0,"mm":11,"name":"小七","oneChild":0.0,"other":0.0,"overTime":0.0,"personID":32,"post":50000.0,"salary1":100213.8,"salary2":99713.77,"socialBase":400.0,"socialInsurance":32.0,"tax":0.0,"taxBase":0.0,"taxFree":0.0,"transportation":100.0,"unemploymentInsurance":1.2,"workingAge":0.0,"yyyy":2021},
{"amount":100306.0,"base":50006.0,"communication":100.0,"dd":10,"deduction":91.2,"department":"网络运营部","dues":500.03,"dynamic":100.0,"education":0.0,"fund":28.0,"fundBase":400.0,"lunch":22.0,"medicalBase":400.0,"medicalInsurance":8.0,"mm":11,"name":"小八","oneChild":0.0,"other":0.0,"overTime":0.0,"personID":33,"post":50000.0,"salary1":100214.8,"salary2":99714.77,"socialBase":400.0,"socialInsurance":32.0,"tax":0.0,"taxBase":0.0,"taxFree":0.0,"transportation":100.0,"unemploymentInsurance":1.2,"workingAge":0.0,"yyyy":2021},
{"amount":100307.0,"base":50007.0,"communication":100.0,"dd":10,"deduction":91.2,"department":"人力资源部","dues":500.04,"dynamic":100.0,"education":0.0,"fund":28.0,"fundBase":400.0,"lunch":22.0,"medicalBase":400.0,"medicalInsurance":8.0,"mm":11,"name":"老九","oneChild":0.0,"other":0.0,"overTime":0.0,"personID":34,"post":50000.0,"salary1":100215.8,"salary2":99715.76,"socialBase":400.0,"socialInsurance":32.0,"tax":0.0,"taxBase":0.0,"taxFree":0.0,"transportation":100.0,"unemploymentInsurance":1.2,"workingAge":0.0,"yyyy":2021}],
"Total":{"amount":702128.0,"base":350028.0,"communication":700.0,"dd":0,"deduction":638.4,"dues":3500.16,"dynamic":700.0,"education":0.0,"fund":196.0,"fundBase":2800.0,"lunch":154.0,"medicalBase":2800.0,"medicalInsurance":56.0,"mm":0,"oneChild":0.0,"other":0.0,"overTime":0.0,"personID":7,"post":350000.0,"salary1":701489.56,"salary2":697989.44,"socialBase":2800.0,"socialInsurance":224.0,"tax":0.0,"taxBase":0.0,"taxFree":0.0,"transportation":700.0,"unemploymentInsurance":8.4,"workingAge":0.0,"yyyy":0}}

每列数据格式的js代码：

{ display: '姓名', name: 'name', width: 60, frozen: true }, //minWidth
{ display: '部门', name: 'department', width: 90, frozen: true }, //, frozen: true , align: 'left'
{ display: '年', name: 'yyyy', width: 60 , frozen: true },//, align: 'left'
{ display: '月', name: 'mm', width: 60, frozen: true },

LigerUI框架Columns数组中每个列对象的参数解释：

参数名	类型	描述	默认值
id	String	列ID
name	String	表格列名
totalSummary	Object	汇总
columns	Object	多表头支持
isAllowHide	Bool	是否允许隐藏,如果允许，将会出现在【显示/隐藏列右键菜单】
isSort	Bool	是否允许排序
type	String	排序类型,包括string、int、float、date
width	Int	表格列宽度
minWidth	Int	表格列最小允许宽度(调整大小时将不允许小于这个值)
format	String	格式化
align	String	左右对齐,left、right、center
hide	String	初始化隐藏
editor	Obect	编辑器
render	Function	单元格渲染器
display	String	表格列标题
headerRender	Function	头部单元格渲染器(column)

frozen

Bool

冻结列状态

true

jQuery LigerUI - 快速开发UI框架 - API文档

为每列数据添加合计的js代码：

{ display: '日', name: 'dd', width: 60, frozen: true, totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>合计:</div>';}}
},
{ display: '基本工资', name: 'base', width: 90, totalSummary:{//type: 'count'render: function (sum, column, cell){test = cell;return '<div>' + data1.Total.base + '</div>';}}
},

比一般列数据格式多了totalSummary，而且要自定义汇总的数据值，需用到render函数，

虽然render: function (sum, column, cell)有三个参数，但是我不用这些参数，直接从post返回值中取数据来显示即可。（test=cell是多余的）

Grid - jQuery LigerUI API

最终效果：

前端UI框架ligerui表格汇总功能无法计算全部数据的合计的解决方法相关推荐

汇总——前端UI框架
本文整理了一些比较流行的前端UI框架,排名不分先后,仅供参考.可按照项目需求自行考虑. 1.bootstrap Bootstrap 是Twitter推出的一个用于前端开发的,一个用于 HTML.CSS ...
VUE常用UI组件插件及框架-vue前端UI框架收集
UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...
element ui点击按钮弹出款_前端猿应该知道的十大最流行的前端UI框架
在前端项目开发过程中,现在很少有人会使用原生的CSS来搭建页面,总归都会引入一些前端UI框架以减少代码的书写.一般为了方便自己的使用,很多大公司都有自己的一套UI框架,同时也会把其开源出来.下面就是最 ...
原有ui项目调用qml_从0开始写前端UI框架：概述
# 缘起经常听说:不要重复造轮子,我深同此看法.如果在项目开发阶段,你还在研究和仿造现成的轮子,那项目的交付期将会是遥遥无期,能不能造出轮子不说,就算是造出的轮子,功能别人已经实现过了的功能,你的 ...
从0开始写前端UI框架：概述
缘起经常听说:不要重复造轮子,我深同此看法.如果在项目开发阶段,你还在研究和仿造现成的轮子,那项目的交付期将会是遥遥无期,能不能造出轮子不说,就算是造出的轮子,功能别人已经实现过了的功能,你的轮子会 ...
推荐几个精致的web UI框架及常用前端UI框架
以下是几个精致的web UI框架 1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范, ...
前端ui框架layUI
layUI layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. https://www.layui.co ...
目前流行前端UI框架排行榜
在前端项目开发过程中,总是会引入一些UI框架,已为方便自己的使用,很多大公司都有自己的一套UI框架,下面就是最近经常使用并且很流行的UI框架. 一.Mint UI 流行指数:★★★★ Mint UI是 ...
后端程序员转行前端，强烈推荐这6个前端UI框架，第二款小程序UI框架颜值最高！...
昨天有个同事问我有没有可以直接上手的前端UI框架. 那今天就给大家推荐6个简单.视觉体验好的前端框架没吃过猪肉,肯定见过猪跑! Jquery Mobile demo地址: https://demos ...
2014年最受欢迎WEB前端UI框架
2014年已经过了一半,WEB前端受到更多人的观注,WEB前端也已经逐渐成为一种职业头衔! 相应的WEB前端UI框架更是受到新人追捧,下边为大家列出目前最受欢迎.最优秀的前端框架以供大家选择一款适合自 ...

前端UI框架ligerui表格汇总功能无法计算全部数据的合计的解决方法

LigerUI框架Columns数组中每个列对象的参数解释：

前端UI框架ligerui表格汇总功能无法计算全部数据的合计的解决方法相关推荐

最新文章

热门文章