DataGrid 合并单元格

原创 2015年11月21日 15:05:07

在DataGrid 的onLoadSuccess事件中调用合并方法

onLoadSuccess: function (data) {
          if (data.rows.length > 0) {
              //调用mergeCellsByField()合并单元格
              mergeCellsByField("tb", "列名1,列名2");  //第一个参数为表格的id 第二个参数为合并列名 可为多列 用','分割
          }
         },

 

//合并方法

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
                });
                /*tTable.datagrid("mergeCells", { //根据ColArray[j]进行合并
                    index: i - tmpA,
                    field: "spOrgIdStr",
                    rowspan: tmpA
                });
               */
                tmpA = 1;
            }
            PerTxt = CurTxt;
        }
    }
}


经测试验证上述方法存在一定漏洞,比如只要上下列相同就会合并,完全不考虑前面列是否存在限制条件。。

遂做出如下修改

//datagrid 合并列 根据某列的限制
function mergeFieldByField(tableID, arr) {
    var dg = $("#" + tableID); //要合并的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(condiName != null){
            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;  
                }  
            }  
        }  
    }  
}  


调用方法

onLoadSuccess: function (data) {
        if (data.rows.length > 0) {
var colArray = new Array();
colArray.push('{mergeFiled:"VC_DATE",premiseFiled:"PERSONSTR"}');  //以日期作为限制合并人员
           mergeFieldByField("jxTable", eval('(['+colArray.join(',')+'])'));
        }
      }

 

table合并单元格colspan和rowspan

起因    最近要实现一个成绩分析的功能,最终是要呈现到Word中的,一开始想到的使用报表显示,但是得有单独的数据库表来存储这些数据,如果说项目是刚开始做的话,倒也好说,不过现在项目已经进入了后期,在...

[easyui][datagrid]EasyUI DataGrid根据字段动态合并单元格

1.合并方法 /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * 参数 colList 要合并的列,用逗号分隔(例如:"...
  • szwangdf
  • szwangdf
  • 2014年08月15日 14:47
  • 16206

WPF DataGrid合并单元格

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.mi...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

EasyUI 多行动态选择性合并算法实现

jQuery EasyUI中有一个很好用的数据列表控件,即DataGrid控件,后台以一定的json格式传给控件就能在前台展示出来,功能很强大,不过有时需求需要这样即多行合并,如在列表中如果相同的部门...

EasyUI-datagrid-自动合并单元格(转)

EasyUI-datagrid-自动合并单元格(转) Posted on 2014-08-21 17:25 shenyixin 阅读(5749) 评论(1) 编辑 收藏 1.目标  ...

datagrid的合并单元格(合并行、并列)

并列很简单: columns:[[         {field:'examId',title:'批次',width:150,align:'center',rowspan:2,     ...

jQuery EasyUI DataGrid根据字段动态合并单元格

转载自http://www.gogogogo.me/development/EasyUI-DataGrid-mergeCells.html

Easyui 中 datagrid 合并单元格的打印问题

最近在做一个项目,项目中要求将Easyui中的datagrid
  • kokar
  • kokar
  • 2014年11月21日 16:18
  • 1746
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DataGrid 合并单元格
举报原因:
原因补充:

(最多只允许输入30个字)