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，本转载主要为分享技术知识，如有侵权，请联系转载人及时删除！