EasyUI-DataGrid多行动态选择性合并算法实现

 jQuery EasyUI中有一个很好用的数据列表控件，即DataGrid控件，后台以一定的json格式传给控件就能在前台展示出来，功能很强大，不过有时需求需要这样即多行合并，如在列表中如果相同的部门字段上下合并达到Excel展示相同的效果，而且有时不止这一个字段的合并，还有其他字段根据内容相同或者其他字段的ID相同啊进行合并。
       官网上没有对应的类似的Demo，可能开发中遇到这种情况一般我们都自己动态拼接成一个table。其实，利用官网提供的DataGrid的方法是可以实现datagrid在展现时表格行动合并，不过查询的数据要把合并的数据行“安排”在一起。
       首先我们

//datagrid加载完后合并指定单元格
function mergeCells(data){
	var arr =[{mergeFiled:"SERIALNUM",premiseFiled:"PROJECTID"},	//合并列的field数组及对应前提条件filed（为空则直接内容合并）
	          {mergeFiled:"PROJECTNAME",premiseFiled:"PROJECTID"},
	          {mergeFiled:"ORGSTARTTIME",premiseFiled:"PROJECTID"},
	          {mergeFiled:"ORGUNIT",premiseFiled:"PROJECTID"}
	         ];	
	var dg = $("#datagrid1");	//要合并的datagrid中的表格id
	var rowCount = dg.datagrid("getRows").length;
	var cellName;
	var span;
	var perValue = "";
	var curValue = "";
	var perCOndition="";
	var curCOndition="";
	var flag=true;
	var cOndiName="";
	var length = arr.length - 1;
	for (i = length; i >= 0; i--) {
		cellName = arr[i].mergeFiled;
		cOndiName=arr[i].premiseFiled;
		if(isNotNull(condiName)){
			flag=false;
		}
		perValue = "";
		perCOndition="";
		span = 1;
		for (row = 0; row <= rowCount; row++) {
			if (row == rowCount) {
				curValue = "";
				curCOndition="";
			} else {
				curValue = dg.datagrid("getRows")[row][cellName];
				/* if(cellName=="ORGSTARTTIME"){//特殊处理这个时间字段
					curValue =formatDate(dg.datagrid("getRows")[row][cellName],"");
				} */
				if(!flag){
					curCOndition=dg.datagrid("getRows")[row][condiName];
				}
			}
			if (perValue == curValue&&(flag||perCOndition==curCondition)) {
				span += 1;
			} else {
				var index = row - span;
				dg.datagrid('mergeCells', {
					index : index,
					field : cellName,
					rowspan : span,
					colspan : null
				});
				span = 1;
				perValue = curValue;
				if(!flag){
					perCOndition=curCondition;
				}
			}
		}
	}
}

其中

var arr =[{mergeFiled:"SERIALNUM",premiseFiled:"PROJECTID"},	//合并列的field数组及对应前提条件filed（为空则直接内容合并）
	          {mergeFiled:"PROJECTNAME",premiseFiled:"PROJECTID"},
	          {mergeFiled:"ORGSTARTTIME",premiseFiled:"PROJECTID"},
	          {mergeFiled:"ORGUNIT",premiseFiled:"PROJECTID"}
	         ];	

是定义要合并哪些列的数组（存对象），数组里的对象有2个属性，mergeFiled：合并列的field名，和premiseFiled：合并前边列的前提条件约束列即只有这个约束列相等时再合并mergeFiled列，如premiseFiled:"",则直接按内容合并，而直接按内容相同与否合并就有一个很大的bug,就是相邻的行即使不应该合并但是内容相同也合并了，这就很容造成表格合并的效果参差不齐不是我们想要的，所以增加了一个premiseFiled属性来约束合并作为前提条件，如只有projectID字段（可甚至否一个字段hidden="true"来隐藏此列）相同的情况下才合并projectName。

这

var dg = $("#datagrid1");	//要合并的datagrid中的表格id

是获取table的jQuery对象以便后边获取各个行的数据。

       此方法是对相邻在满足约束字段相同的情况下进行的内容合并，所以查询时要把这些要合并的行“安排”在一起，用排序或者连接查询，分组都可以。

        如果有个日期字段也想合并的话，单纯的这样是不行的，是合并不了的，调用DataGrid方法获取的json格式的日期是不相同的（很难相同），这时需要用到json日期的格式化改成我们常见的格式再比较，如我所注释着的代码：

                             /* if(cellName=="ORGSTARTTIME"){//特殊处理这个时间字段
					curValue =formatDate(dg.datagrid("getRows")[row][cellName],"");
				} */

有关json日期的格式化详细，请参考我的上一篇文章:json日期格式转换问题

动态合并DataGrid行数据的效果如下：

           如果有checkbox的话，你想对应的更改前边的checkbox,也想进行合并，你可以把checkbox列的field属性设置为合并的列的值如projectId,这样把checkbox列也写入到上边JS方法中的数组中,那么就能起到合并checkbox最用！

          已深夜，不写了，如有问题或者建议，可以评论留言。

Mr_JJwonG05

这个家伙很懒，什么也没留下！

Tags | 热门标签

• buffer
• cpython
• datetime
• split
• keyword
• timestamp
• vbscript
• chat
• web3
• bytecode
• hashtable
• char
• range
• stream
• grid
• jsp
• tags
• js
• fetch
• perl
• subset
• md5
• regex
• const
• scala
• node.js
• controller
• version
• join
• expression

RankList | 热门文章

• 1mui与springMVC前后端分离
• 2【LaTeX应用】数学公式中的换行问题
• 3mysql索引不生效
• 49538045BufferUnpooledByteBuf
• 57.2 类加载的时机
• 6在chrome下获取svg使用contentDocument和getSVGDocument返回null，在火狐下正常怎么解决？
• 7教你如何强制退出Mac无响应程序
• 8开发笔记:非关系型数据库(NOSQL)Redis
• 9PHP单例模式实例浅析
• 10解决Foxmail开机自动启动问题的补充－自启动任何程序
• 11重新获取 Onsen 用户界面范围组件
• 12双MCU有感无感双控制方案BLDC电机驱动硬件到软件代码从无到有64集视频教程 原价 659元 限时 1元 ！...
• 13钢条切割问题——动态规划
• 141.吴恩达神经网络和深度学习单变量线性回归
• 15【中等】【LeetCode刷题笔记（十）】之 8.字符串转整数

PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有