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