easyUI单元格合并自定义封装(二)

来源:互联网 发布:多米音乐mac版 编辑:程序博客网 时间:2024/05/29 18:02
  1. 效果图:

    效果图与 easyUI单元格合并自定义封装 (一) 效果图一致


  2. 源代码如下:

    [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.       }  


  3. 参数说明
    grid:        easyUI的datagrid对象
    refCols        合并参考列数组,及这些列都相等则合并rowFildNames指定的列
    rowFildNames: 和并列的field属性值及要合并的列数组

  4. 示例:mergeGridColCells($('#serviceTypeTable'),['serviceTypeId','areaId'],['areaName']);

0 0
原创粉丝点击