EasyUI-datagrid-自动合并单元格

1.目标

  1.1表格初始化完成后，已经自动合并好需要合并的行；

  1.2当点击字段排序后，重新进行合并；

 

2.实现

  2.1 引入插件

1. /** 
2.  * author ____′↘夏悸 
3.  * create date 2012-11-5 
4.  * 
5.  **/  
6. $.extend($.fn.datagrid.methods, {  
7.     autoMergeCells : function (jq, fields) {  
8.         return jq.each(function () {  
9.             var target = $(this);  
10.             if (!fields) {  
11.                 fields = target.datagrid("getColumnFields");  
12.             }  
13.             var rows = target.datagrid("getRows");  
14.             var i = 0,  
15.             j = 0,  
16.             temp = {};  
17.             for (i; i < rows.length; i++) {  
18.                 var row = rows[i];  
19.                 j = 0;  
20.                 for (j; j < fields.length; j++) {  
21.                     var field = fields[j];  
22.                     var tf = temp[field];  
23.                     if (!tf) {  
24.                         tf = temp[field] = {};  
25.                         tf[row[field]] = [i];  
26.                     } else {  
27.                         var tfv = tf[row[field]];  
28.                         if (tfv) {  
29.                             tfv.push(i);  
30.                         } else {  
31.                             tfv = tf[row[field]] = [i];  
32.                         }  
33.                     }  
34.                 }  
35.             }  
36.             $.each(temp, function (field, colunm) {  
37.                 $.each(colunm, function () {  
38.                     var group = this;  
39.                       
40.                     if (group.length > 1) {  
41.                         var before,  
42.                         after,  
43.                         megerIndex = group[0];  
44.                         for (var i = 0; i < group.length; i++) {  
45.                             before = group[i];  
46.                             after = group[i + 1];  
47.                             if (after && (after - before) == 1) {  
48.                                 continue;  
49.                             }  
50.                             var rowspan = before - megerIndex + 1;  
51.                             if (rowspan > 1) {  
52.                                 target.datagrid('mergeCells', {  
53.                                     index : megerIndex,  
54.                                     field : field,  
55.                                     rowspan : rowspan  
56.                                 });  
57.                             }  
58.                             if (after && (after - before) != 1) {  
59.                                 megerIndex = after;  
60.                             }  
61.                         }  
62.                     }  
63.                 });  
64.             });  
65.         });  
66.     }  
67. }); 

 2.2html代码

1. <table id="simpleDgId" style="height: 300px" />  

2.3js代码

1. var sortFlag = false;  
2.     $('#simpleDgId').datagrid({  
3.         url:"testController.do?datagrid",  
4.         fitColumns:true,  
5.         singleSelect:true,  
6.         remoteSort: false,  
7.         columns:[[  
8.                   {field:"age",title:"年龄",width:25,align:'center',sortable:true},  
9.                   {field:"userName",title:"名称",width:25,align:'center',sortable:true},  
10.                   {field:"mobilePhone",title:"手机",width:25,align:'center',sortable:true}  
11.         ]],  
12.         onSortColumn:function(sort, order){  
13.             sortFlag = true;  
14.             if("userName"==sort){  
15.                 $(this).datagrid("autoMergeCells",[sort]);  
16.             }else{  
17.                 $(this).datagrid("autoMergeCells");  
18.             }  
19.         },  
20.         onLoadSuccess: function(data){  
21.             if(!sortFlag) $(this).datagrid("autoMergeCells");  
22.         }  
23.     });