jeecg框架表格合计解决方案

首先假设我们有100条数据。
那么合计方案有两种；
第一种情况：直接拿到全部100条数据的

该合计方案，在jeecg的常见案例有实例，可以直接参考

解决思路：源码；

这里是分页参数，规定每页显示10条数据。

下面开始合计：
步骤一：先创建两个变量

步骤二：全部数据给到newDataSource，然后调用合计方法。

步骤三：开始合计

dataHandling(num) {
this.newArr=[];
let arrLength = this.newDataSource.length; // 数组长度;
let index = 0;
//因为num是9，
//所以我们以9条数据为一组，将数据放入新的数组
for (let i = 0; i < arrLength; i++) {
if (i % num === 0 && i !== 0) {
this.newArr.push(this.newDataSource.slice(index, i));
index = i;
}
if ((i + 1) === arrLength) {
this.newArr.push(this.newDataSource.slice(index, (i + 1)));
}
}
var arrs=this.newArr;
//将已经分为9条一组的数组进行遍历
for (let i =0;i<arrs.length;i++){
let arr = arrs[i];
//这里创建一个数组
let newArr= { };，//用于存放计算后的第10条数据
newArr.name=“-”;//不需要合计额字段(根据需求修改)
newArr.updateTime=“-”;//不需要合计额字段
newArr.rowIndex=“合计”//这里是第10条合计的名字
var level=0;//需要合计的字段(根据需求修改)
var point=0;//需要合计的字段
//拿到数组中对应下表的9条数据，进行遍历
//然后对需要合计的字段进行重复相加，得到合计的数据
for (let j=0;j<arr.length;j++){
level+=arr[j].level;
point+=arr[j].point;
}
newArr.level=level;
newArr.point=point;
arrs[i].push(newArr);//把第10条合计的数据放入数组
}
//把已经合计好的数据放入数组中
var newDataSource=[];
for (let i =0;i<arrs.length;i++){
let arr = arrs[i];
for(var j in arr){
newDataSource.push(arr[j]);
}
}
console.log(this.dataSource)
//合计后重新给到dataSource
//就得到了每页10条，包含合计的数据
//合计完成啦
this.dataSource = Object.values(newDataSource);
console.log(this.dataSource)
}

第二种情况：
假如100条数据，一共10页，点击哪一页才拿到该页数据时。

这里的总条数是加上分3页，多了3行合计总数的，所以原数据为23条

实现思路：
1.就是对分页的pagesize（页大小）进行操作
详情一；
2.关键是怎么保证请求为10条，返回为11条，还正常显示呢？
详情见步骤三；
4.合计后分页和总数对不上，导致显示数据错误，怎么办？
详情见步骤六
重点就是保证每次请求数据都是10条，然后让分页，和总数显示正常

开始合计：
步骤一：设计分页参数，

步骤二：先创建两个变量

步骤三：要找到方法this.dataSource取值之前的地方，添加一个判断

敲黑板：这里是重点：

//保证我们每次请求10条，如果不是10条就-1
if(params.pageSize % 10 != 0){
//这里保证每次拿10条数据
params.pageSize = params.pageSize-1;
//这里保证每次拿数据，页面显示总数减一
//原因是因为我们请求10条数据，合计后11条，
//会导致下一次这里变为11，要将值改回10
this.ipagination.pageSize = this.ipagination.pageSize -1
}
步骤四：this.dataSource取值之后，调用合计方法

步骤五：思路和上面的合计一样。
只不过这里我把合计字段封装了，后面只要在需要合计的字段下面添加一个total:true就会自动合计

源代码：

dataHandling(num) {
this.newArr = this.newDataSource.slice(0,this.newDataSource.length +1);
var arrs = this.newArr;
let Array ={};
let columns = this.$data.columns;
for(let i=0;i<columns.length;i++){
let dataindex = columns[i].dataIndex;
if(dataindex === “rowIndex”){
Array[dataindex] = ‘合计’;
}else if(columns[i].total){
let total = 0;
for(let j=0;j<arrs.length;j++){
total += arrs[j][dataindex];
}
Array[dataindex] = total;
}else{
Array[dataindex] = ‘-’;
}
}
arrs.push(Array);
//—合计之后每一页会多出一条数据，所以将pageSize + 1,保证数据正常的显示。
this.ipagination.pageSize = this.ipagination.pageSize +1;
this.dataSource = Object.values(arrs);
},

步骤六：重点：

假如100条数据，每页显示10条，一共10页。
我们加上合计之后每页11条，总数就会变成110条，数据对不上，显示不正常。
因此要让总数和分页显示正常，就要在原来数量的基础上，分多少页面就要加上多少条数据

jeecg框架表格合计解决方案相关推荐

FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架
FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0.详细的更新记录请参考这里:http://fineui.com/version 主 ...
FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架...
FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0.详细的更新记录请参考这里:http://fineui.com/version 主 ...
jeecg框架日常开发问题解决方法
原文:https://my.oschina.net/matt0614/blog/822225 摘要: 用这个框架,发现好多问题,记录下来,以后做项目减少查找问题时间,此文章会不定期更新... 启动报错 ...
FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶......
2019独角兽企业重金招聘Python工程师标准>>> FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0.详细的 ...
开发指南专题二：JEECG微云快速开发平台JEECG框架初探
开发指南专题二:JEECG微云快速开发平台JEECG框架初探 2.JEECG框架初探 2.1演示系统打开浏览器输入JEECG演示环境地址:http://demo.jeecg.org:8090/可以看 ...
DWZ (JUI) 教程 dwz框架刷新dialog解决方案
原文:DWZ (JUI) 教程 dwz框架刷新dialog解决方案在DWZ中进行ajax表单提交后,通过回调函数来返回状态结果,以及返回是否需要刷新父页的navTabId. DWZ给 ...
Layui 数据表格合计
Lay-ui数据表格合计实现基础的数据表格合计获取合计数据修改合计数据合计后计算平均值去除小数合计所有数据(有分页) 编辑后重新合计总代码阅读提示:本人萌新一枚,写此博客仅仅是记录一下 ...
vue element计算表格合计问题
vue element计算表格合计问题问题:当表格的el-table-column标签下的属性prop属性值为'对象.属性'时,将不能自动合计. 例如: <el-tableborderv-lo ...
layui数据表格合计行
在日常的学习或开发中,关于后台管理这一块的都会使用到layui.table数据表格,只要用到layui.table数据表格一般就会用到数据表格合计行. 在layui官方文档数据表格的这一栏中,有&qu ...
el-table表格合计放在上面
el-table的表格合计官网给出了属性和方法,但是合计是在表格的下方,若是把合计行放在上面,一个简单的方法实现它: 效果如图: 方法如下: <el-table :data="tabl ...

jeecg框架表格合计解决方案

jeecg框架表格合计解决方案相关推荐

最新文章

热门文章