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

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

[javascript]  view plain  copy

1. //datagrid加载完后合并指定单元格  
2. function mergeCells(data){  
3.     var arr =[{mergeFiled:"SERIALNUM",premiseFiled:"PROJECTID"},    //合并列的field数组及对应前提条件filed（为空则直接内容合并）  
4.               {mergeFiled:"PROJECTNAME",premiseFiled:"PROJECTID"},  
5.               {mergeFiled:"ORGSTARTTIME",premiseFiled:"PROJECTID"},  
6.               {mergeFiled:"ORGUNIT",premiseFiled:"PROJECTID"}  
7.              ];   
8.     var dg = $("#datagrid1");   //要合并的datagrid中的表格id  
9.     var rowCount = dg.datagrid("getRows").length;  
10.     var cellName;  
11.     var span;  
12.     var perValue = "";  
13.     var curValue = "";  
14.     var perCondition="";  
15.     var curCondition="";  
16.     var flag=true;  
17.     var condiName="";  
18.     var length = arr.length - 1;  
19.     for (i = length; i >= 0; i--) {  
20.         cellName = arr[i].mergeFiled;  
21.         condiName=arr[i].premiseFiled;  
22.         if(isNotNull(condiName)){  
23.             flag=false;  
24.         }  
25.         perValue = "";  
26.         perCondition="";  
27.         span = 1;  
28.         for (row = 0; row <= rowCount; row++) {  
29.             if (row == rowCount) {  
30.                 curValue = "";  
31.                 curCondition="";  
32.             } else {  
33.                 curValue = dg.datagrid("getRows")[row][cellName];  
34.                 /* if(cellName=="ORGSTARTTIME"){//特殊处理这个时间字段 
35.                     curValue =formatDate(dg.datagrid("getRows")[row][cellName],""); 
36.                 } */  
37.                 if(!flag){  
38.                     curCondition=dg.datagrid("getRows")[row][condiName];  
39.                 }  
40.             }  
41.             if (perValue == curValue&&(flag||perCondition==curCondition)) {  
42.                 span += 1;  
43.             } else {  
44.                 var index = row - span;  
45.                 dg.datagrid('mergeCells', {  
46.                     index : index,  
47.                     field : cellName,  
48.                     rowspan : span,  
49.                     colspan : null  
50.                 });  
51.                 span = 1;  
52.                 perValue = curValue;  
53.                 if(!flag){  
54.                     perCondition=curCondition;  
55.                 }  
56.             }  
57.         }  
58.     }  
59. }  

其中

[javascript]  view plain  copy

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

 

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

这

[javascript]  view plain  copy

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

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

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

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

[javascript]  view plain  copy

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

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

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

扫描二维码关注公众号，回复： 2211650 查看本文章

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