easyUI单元格合并自定义封装

1、指定列的行合并

* 效果图：

 

合并自定义封装（一）

 

* 程序：

 

1. function mergeGridColCells(grid,rowFildName)  
2. {  
3.        var rows=grid.datagrid('getRows' );  
4.        //alert(rows.length);  
5.        //alert(rows[1][rowFildName]);  
6.        var startIndex=0;  
7.        var endIndex=0;  
8.        if(rows.length< 1)  
9.       {  
10.              return;  
11.       }  
12.       $.each(rows, function(i,row){  
13.              if(row[rowFildName]==rows[startIndex][rowFildName])  
14.             {  
15.                   endIndex=i;  
16.             }  
17.              else  
18.             {  
19.                   grid.datagrid( 'mergeCells',{  
20.                         index: startIndex,  
21.                         field: rowFildName,  
22.                         rowspan: endIndex -startIndex+1  
23.                   });  
24.                   startIndex=i;  
25.                   endIndex=i;  
26.             }  
27.   
28.       });  
29.  grid.datagrid( 'mergeCells',{  
30.                   index: startIndex,  
31.                   field: rowFildName,  
32.                   rowspan: endIndex -startIndex+1  
33.       });
34. }  

 

 

*参数说明

grid：        easyUI的datagrid对象

rowFildName： 和并列的field属性值

 

 

合并自定义封装（二）

 

1. 源代码如下：
   
   
   [javascript]  view plain  copy

    

   1. function mergeGridColCells(grid,refCols,rowFildNames)  
   2.       {  
   3.              var rows=grid.datagrid('getRows' );  
   4.              //alert(rows.length);  
   5.              //alert(rows[1][rowFildName]);  
   6.              var flag=false ;  
   7.              var startIndex=0;  
   8.              var endIndex=0;  
   9.              if(rows.length< 1)  
   10.             {  
   11.                    return;  
   12.             }  
   13.             $.each(rows, function(i,row){  
   14.               $.each(refCols, function(j,refCol){  
   15.                     if(row[refCol]!=rows[startIndex][refCol])  
   16.                     {  
   17.                           flag= false;  
   18.                           return false ;  
   19.                     }  
   20.                     else  
   21.                     {  
   22.                           flag= true;  
   23.                     }  
   24.               });  
   25.                   //if(row[rowFildName]==rows[startIndex][rowFildName])  
   26.                   if(flag)  
   27.                   {  
   28.                         endIndex=i;  
   29.                   }  
   30.                    else  
   31.                   {  
   32.                          $.each(rowFildNames, function(k,rowFildName){  
   33.                                grid.datagrid( 'mergeCells',{  
   34.                                     index: startIndex,  
   35.                                     field: rowFildName,  
   36.                                     rowspan: endIndex -startIndex+1,  
   37.                                     colspan: null  
   38.                               });  
   39.                          });  
   40.                          
   41.                         startIndex=i;  
   42.                         endIndex=i;  
   43.                   }  
   44.             });  
   45.             $.each(rowFildNames, function(k,rowFildName){  
   46.                    grid.datagrid( 'mergeCells',{  
   47.                               index: startIndex,  
   48.                               field: rowFildName,  
   49.                               rowspan: endIndex -startIndex+1,  
   50.                               colspan: null  
   51.                         });  
   52.           });  
   53.       }  
   
   
   
2. 参数说明
   
   grid：        easyUI的datagrid对象
   

   refCols        合并参考列数组，及这些列都相等则合并rowFildNames指定的列
   rowFildNames： 和并列的field属性值及要合并的列数组
   
   
3.  
   示例：mergeGridColCells($('#serviceTypeTable'),['serviceTypeId','areaId'],['areaName']);