Easyui-DataGrid纵向合并单元格(根据某列合并)

2 篇文章 0 订阅
2 篇文章 0 订阅

  使用Easyui-DataGrid过程用。做统计/报表等时经常会使用到合并单元格,原生态Easyui-DataGrid没有合并单元格的属性或方法。

解决方案:

代码一

onLoadSuccess: function (data) {                      //data是默认的表格加载数据,包括rows和Total
  if (data.rows.length > 0) {
     //调用mergeCellsByField()合并单元格
     mergeCellsByField("mygrid", "opt,buyprojectCode,buyprojectName,projectIndustryType,tenderName,agencyName,informationServiceFee,informationServiceState,fieldFee,fieldState");
  }
}

代码二

 /**
         * EasyUI DataGrid根据字段动态合并单元格
         * 参数 tableID 要合并table的id
         * 参数 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 buyprocode = "";
            var newbuyprocode = "";
            var alertStr = "";
            for (j = ColArray.length - 1; j >= 0; j--) {
                PerTxt = "";
                buyprocode = "";
                tmpA = 1;
                tmpB = 0;

                for (i = 0; i <= TableRowCnts; i++) {
                    if (i == TableRowCnts) {
                        CurTxt = "";
                        newbuyprocode = "";
                    }
                    else {
                        CurTxt = tTable.datagrid("getRows")[i][ColArray[j]];
                        newbuyprocode = tTable.datagrid("getRows")[i]["buyprojectCode"];
                    }
                    if (PerTxt == CurTxt && buyprocode == newbuyprocode) {
                        tmpA += 1;
                    }
                    else {
                        tmpB += tmpA;

                        tTable.datagrid("mergeCells", {
                            index: i - tmpA,
                            field: ColArray[j],  //合并字段
                            rowspan: tmpA,
                            colspan: null
                        });
                        tTable.datagrid("mergeCells", { //根据ColArray[j]进行合并
                            index: i - tmpA,
                            field: "Ideparture",
                            rowspan: tmpA,
                            colspan: null
                        });

                        tmpA = 1;
                    }
                    PerTxt = CurTxt;
                    buyprocode = newbuyprocode;
                }
            }
        }

  • 在jQuery("#mygrid").datagrid的onLoadSuccess中调用mergeCellsByField
  • 添加mergeCellsByField方法
  注:如果不需要按照某个字段合并,由系统自动合并请移除代码二中 buyprocode、 newbuyprocode相关代码即可

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值