沫沫金：jQuery EasyUI DataGrid动态合并单元格解决方案

 jQuery EasyUI DataGrid根据字段动态合并单元格，使用自定义函数mergeCellsByField()在DataGrid的onLoadSuccess中调用。

自定义函数mergeCellsByField：

 

/**
 * EasyUI DataGrid根据字段动态合并单元格
 * @param tableID 要合并table的id
 * @param colList 要合并的列,用逗号分隔(例如："name,department,office");
 */
   function mergeCellsByField(tableID,colList){
       var ColArray = colList.split(",");
       var tTable = $('#'+tableID);
       var TableRowCnts=tTable.datagrid("getRows").length;
       var tmpA;
       var tmpB;
       var PerTxt = "";
       var CurTxt = "";
       var alertStr = "";
       for (j=ColArray.length-1;j>=0 ;j-- )
       {
           PerTxt="";
           tmpA=1;
           tmpB=0;

           for (i=0;i<=TableRowCnts ;i++ )
           {
               if (i==TableRowCnts)
               {
                   CurTxt="";
               }
               else
               {
                   CurTxt=tTable.datagrid("getRows")[i][ColArray[j]];
               }
               if (PerTxt==CurTxt)
               {
                   tmpA+=1;
               }
               else
               {
                   tmpB+=tmpA;
                   tTable.datagrid('mergeCells',{
                       index:i-tmpA,
                       field:ColArray[j],
                       rowspan:tmpA,
                       colspan:null
                   });
                   tmpA=1;
               }
               PerTxt=CurTxt;
           }
       }
   }

函数mergeCellsByField调用：

 

function workerCount(){
    $('#coutTable').datagrid({
        title:'员工统计',
        height:595,
        nowrap: false,
        striped: true,
        fitColumns:true,
        url:'<%=path%>/order.do?method=orderCount',
        queryParams:{date:$('#date').datebox('getValue')},
        onLoadSuccess:function(data){
            if (data.rows.length>0)
            {
                //调用mergeCellsByField()合并单元格
                mergeCellsByField("coutTable","department,position");
            }
        },
        columns:[[
            {title:'编号',field:'number',width:120},
            {title:'姓名',field:'name',width:120},
            {title:'部门',field:'department',width:120},
            {title:'职位',field:'position',width:120}
        ]],
        rownumbers:true
    });
}