码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-08-15 16:10:29      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:style   http   color   io   数据   for   ar   art   

1.合并方法

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

2.调用合并方法

  //呈现列表数据
        $(‘#List‘).datagrid({ pagination: true,
            onLoadSuccess: function (data) {
                if (data.rows.length > 0) {
                    //调用mergeCellsByField()合并单元格
                    mergeCellsByField("tbList", "No");
                }
            }
        });

说明:

mergeCellsByField(tableID, colList) ;

参数 tableID 要合并table的id
参数 colList 要合并的列,用逗号分隔(例如:"name,department,office");

这种方法一般情况下都不会用,因为合并出来的不美观

假如:

1 1 1
1 5 1
1 5 1
1 5 2
1 1 2

如下

1 1 1
5 1
1
2
1 2

 

由于表格的限制,没法合并第三列了,3个“1”,2个“2”,合并掉,大家就明白怎么不美观了,不适合一般的查阅习惯

哈哈,根据我方法里面的红色部分,以一个为主列,其他根据他的行数合并,噢噢噢噢噢噢。成功啦

 

非常感谢

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

[easyui][datagrid]EasyUI DataGrid根据字段动态合并单元格,布布扣,bubuko.com

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

标签:style   http   color   io   数据   for   ar   art   

原文地址:http://blog.csdn.net/szwangdf/article/details/38585035

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!