EasyUI：EasyUI-DataGrid多行合並實現

1、首先我們<table>增加一個屬性data-options="onLoadSuccess:mergeCells",mergeCells是我們對應的JS方法名，意思就是datagrid加載數據成功之后，執行這個mergeCells方法，mergeCells定義如下：

//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、是定義要合並哪些列的數組（存對象），數組里的對象有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],""); 
} */  

如果有checkbox的話，你想對應的更改前邊的checkbox,也想進行合並，你可以把checkbox列的field屬性設置為合並的列的值如projectId,這樣把checkbox列也寫入到上邊JS方法中的數組中,那么就能起到合並checkbox最用！

本文轉載自http://blog.csdn.net/chenleixing/article/details/44229359，本轉載主要為分享技術知識，如有侵權，請聯系轉載人及時刪除！