easyui DataGrid表体单元格跨列rowspan

2023-12-06 13:09:10

最近做项目用到了jquery easyui,其中一组DataGrid做的报表是给客户大领导看的，客户要求报表样式跟他们原有系统的一模一样（如下图1）。

DataGrid样式好调，只是城市名称单元格跨行这个难度稍大，本着用户体验无尺度的用户价值观，无尺度的修改了easyui源代码

 easyui DataGrid表体单元格跨列rowspan
图1 – “城市”和“名称”列跨行的处理效果

一、分析准备：

1、jquery版本：1.8.0;easyui版本：1.3.2
2、首先读easyui文档，只有关于表头rowspan和colspan的配置的方式，表体装载数据的配置并没有介绍有关rowspan和colspan的，
再仔细读，发现文档中有如下内容：

 easyui DataGrid表体单元格跨列rowspan
图2 –DataGrid View文档描述

初步判定render方法应该就是装载DataGrid数据的方法吧。

3、打开jquery.easyui.min.js，代码格式明显很乱，为了提高可读性，可以使用工具格式化一下，Eclipse或者Visual Studio都有相应的快捷工具。

搜索render方法，发现由于太多没有办法确定具体是哪一个，继续看文档，renderRow的描述“This is an option function and will be called by render function.”，说明renderRow是被render调用的。搜索renderRow，直接就可以跟踪到了，它定义在一个叫“_5ef”变量中（jquery.easyui.min.js的变量或者方法命名都是3位长度的16进制数，在文件的8276行，格式化代码之后大约在10564行，直接搜索var _5ef就能找到它了），会发现DataGrid View的所有方法都在这里。

4、读render和renderRow方法，结合easyui文档介绍，文档和源码对比：

　　Render有三个参数分别是：target, container, frozen，对应源代码就是render : function(_5f0, _5f1, _5f2)
　　renderRow 的五个参数如下：target, fields, frozen, rowIndex, rowData也就是对应renderRow : function(_5fe, _5ff, _600, _601, _602)
其中render方法是装载datagrid数据的主方法，render方法首先把数据根据记录分行，然后逐行调用renderRow方法，把每一条记录装载为datagrid表格的一行数据。
附renderRow的五个参数解释：
　　_5fe:datagrid对象，翻译过来基本上是JSON格式的字符串，需要装载的数据保存在这里面
　　_5ff:表头Field集合，也就是页面中定义Datagrid的每一列的Field都保存在_5ff中
　　_600: frozen顾名思义，是一个冻结标记。在本方法中，和opts.rownumbers组合成一个&&运算，用来标记是否显示行号
　　_601：是行的索引，以0为初始下标
　　_602：是对应行的数据，装载datagrid的数据
　　其中render的功能是根据条件逐行装载需要装载的数据，应该说_5f5.push(this.renderRow.call(this, _5f0, _5f4, _5f2, i,rows[i]))调用就是装载每一行数据。
renderRow的功能是把装载的行装载到DataGrid对应的table中，cc.push("<td field=\"" + _604 + "\" " + _607 + ">");就是装载<td>的代码。
因此，我们可以有如下结论：

在renderRow方法中的cc.push("<td field=\"" + _604 + "\" " + _607 + ">");修改为cc.push("<td rowspan=\"" + rownumber + "\" field=\"" + _604 + "\" " + _607 + ">");的形式，就一切OK了

我们可以在需要处理的<td>标签中增加一些能够显示的数据来验证我们的思路是否正确。验证思路通过，那下一步就要处理它了

二、初步修改

我们可以确定，我们要把表格处理成如下图3右所示的样式

 easyui DataGrid表体单元格跨列rowspan          easyui DataGrid表体单元格跨列rowspan
    图3左                图3右

1、获取要跨行的单元格和数量：

我们要把一个城市名称都显示的列（如上-左）做成如上（右）所示的效果，首先要明确我们在哪一行（城市如重庆，出现的第一行）需要rowspan来处理，既然有rowspan，那肯定要有rowspan的数量。因此，需要两个变量来统计跨行的那一行以及跨越的数量

2、在起初，我们由_5fe入参可以获得所有的数据_5fe1 = $.data(_5fe, "datagrid").data.rows;,以行为记录对象的二维数组，循环rows，就可以得到每一个单元格的数据了。例：rows [i][_5ff[3]]就是获取i行对应第3（四）列的数据了，_5ff是rows对列的特殊处理
在renderRow方法中加入以下代码：

var _5fe1 = $.data(_5fe, "datagrid");
var rows = _5fe1.data.rows;

确定两个数组变量以及针对它们的处理：

easyui DataGrid表体单元格跨列rowspan
//记录需要跨列的单元格行号
var city = [];
//记录需要跨列的单元格跨列数量
var cityRowspanCount = [];
//因为我处理城市列数据是倒序处理的，对于第1行数据可能会处理不到，所以初始化city[0]和定义cityCount，
city[0] = 1;
var cityCount = 1;
//处理city序列
for (var i = rows.length - 1; i > 0; i--){
    if (rows[i][_5ff[3]] != rows[i - 1][_5ff[3]]){
        city[i] = 1;
    }
}
//处理city对应的数量cityRowspanCount
for (var j = rows.length - 1; j > 0; j--){
    if (rows[j][_5ff[3]] != rows[j - 1][_5ff[3]]){
        cityRowspanCount[j] = cityCount;
        cityCount = 1;
    }
    else{
        cityCount++;
    }
    if (j == 1){
        cityRowspanCount[0] = cityCount;
    }
}
easyui DataGrid表体单元格跨列rowspan

通过两个for循环，得到city和cityRowspanCount 两个数组，
我们以图3的处理效果，打印城市的处理结果
    city : [1,1,,1,,,,,,1]
    cityRowspanCount : [1,2,,6,,,,,,5]
这样，就可以用以上两个数组处理表格了，接着读renderRow方法剩下的内容，if的功能是加载表格的行号，for循环的作用就是对当前行的数据依次读取
　　if (_600 && opts.rownumbers)
　　for ( var i = 0; i < _5ff.length; i++)
分析或者打印_5ff，我们可以发现它是所有列field属性的集合。确定是哪一列需要跨行处理，注意隐藏列也要算上,以0下标为初始。

3、修改：

easyui DataGrid表体单元格跨列rowspan
// 读取表中内容
for ( var i =  0; i < _5ff.length; i++) {
    //第四（3）列需要用rowspan合并，因此重新处理
    if (i == 3)
    {
        //对于需要装载的单元格，执行if中的语句
        if (city[_601])
        {
            var _604 = _5ff[i];
            var col = $(_5fe).datagrid("getColumnOption", _604);
            if (col) {
                var _605 = _602[_604];
                var _606 = col.styler ? (col.styler(_605, _602, _601) || "") : "";
                var _607 = col.hidden ? "style=\"display:none;" + _606 + "\"" : (_606 ? "style=\"" + _606 + "\"" : "");
                //需要装载的单元格处理rowspan为cityRowspanCount对应的数量
                cc.push("<td rowspan=\"" + cityRowspanCount[_601] + "\" field=\"" + _604 + "\" " + _607 + ">");
                if (col.checkbox) {
                    //省略…
                }
                cc.push("<div style=\"" + _607 + "\" ");
                if (col.checkbox) {
                    //省略…
                }
                cc.push("\">");
                if (col.checkbox) {
                    //省略…
                }
                cc.push("</div>");
                cc.push("</td>");
            }
        }    
    }
    else{
        //其它列的内容按照正常模式装载
    }
}
easyui DataGrid表体单元格跨列rowspan

通过以上修改，Datagrid单元格跨列的功能就大体实现了。

三、完善&优化

　　通过修改renderRow方法，基本实现了单元格跨列的功能，但是现在处理city和cityRowspanCount是在renderRow方法里面处理的，由于renderRow方法每装载一行数据就要执行一次，city和cityRowspanCount就要重新生成一次，不仅不符合设计逻辑，还会造成资源浪费等问题，因此把city和cityRowspanCount的定义可以放在render方法里面，提高代码执行效率（注：可能用IE8的朋友会出现表格高度出错的现象，不要着急，后面会告诉大家怎么处理）。

1、首先在render方法中定义city和cityRowspanCount并实现功能，同时为了区别renderRow方法，定义renderRowNew方法，
参数：this.renderRowNew.call(this, _5f0, _5f4, _5f2, i, rows[i],city,cityRowspanCount)

easyui DataGrid表体单元格跨列rowspan
render : function(_5f0, _5f1, _5f2) {
    var _5f3 = $.data(_5f0, "datagrid");
    var opts = _5f3.options;
    var rows = _5f3.data.rows;
    var _5f4 = $(_5f0).datagrid("getColumnFields", _5f2);
    //begin 初始化需要rowspan的行以及数量
    var city = [];
    city[0] = 1;
    var cityRowspanCount = [];
    var cityCount = 1;
    for (var i = rows.length - 1; i > 0; i--){
        if (rows[i][_5f4[3]] != rows[i - 1][_5f4[3]]){
            city[i] = 1;
        }
    }
    for (var j = rows.length - 1; j > 0; j--){
        if (rows[j][_5f4[3]] != rows[j - 1][_5f4[3]]){
            cityRowspanCount[j] = cityCount;
            cityCount = 1;
        }
        else{
            cityCount++;
        }
        if (j == 1){
            cityRowspanCount[0] = cityCount;
        }
    }
    //end
    if (_5f2) {
        if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))) {
            return;
        }
    }
    var _5f5 = [ "<table class=\"datagrid-btable\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\"><tbody>" ];
    for ( var i = 0; i < rows.length; i++) {
        var cls = (i % 2 && opts.striped) ? "class=\"datagrid-row datagrid-row-alt\""
                : "class=\"datagrid-row\"";
        var _5f6 = opts.rowStyler ? opts.rowStyler.call(_5f0, i, rows[i]) : "";
        var _5f7 = _5f6 ? "style=\"" + _5f6 + "\"" : "";
        var _5f8 = _5f3.rowIdPrefix + "-" + (_5f2 ? 1 : 2) + "-" + i;
        
        _5f5.push("<tr id=\"" + _5f8 + "\" datagrid-row-index=\"" + i + "\" " + cls + " " + _5f7 + ">");
　　　　 //调用新写的renderRowNew并注释原来的renderRow方法
        _5f5.push(this.renderRowNew.call(this, _5f0, _5f4, _5f2, i, rows[i],city,cityRowspanCount));
        //_5f5.push(this.renderRow.call(this, _5f0, _5f4, _5f2, i, rows[i]));
        _5f5.push("</tr>");
    }
    _5f5.push("</tbody></table>");
    $(_5f1).html(_5f5.join(""));
}
easyui DataGrid表体单元格跨列rowspan

2、编写renderRowNew方法：

easyui DataGrid表体单元格跨列rowspan
renderRowNew : function(_5fe, _5ff, _600, _601, _602,_601a,_601b,_601c,_601d) {
    var opts = $.data(_5fe, "datagrid").options;
    var cc = [];
    // 装载行号
    if (_600 && opts.rownumbers) {
        // _603表格当前行
        var _603 = _601 + 1;
        if (opts.pagination) {
            _603 += (opts.pageNumber - 1) * opts.pageSize;
        }
        cc.push("<td class=\"datagrid-td-rownumber\"><div class=\"datagrid-cell-rownumber\">" + _603
                + "</div></td>");
    }
    // 装载当前行数据
    for ( var i =  0; i < _5ff.length; i++) {
        //第3列需要用rowspan合并，因此重新写
        if (i == 3){
            //对于需要展示的单元格，才能执行if中的语句
            if (_601a[_601]){
                var _604 = _5ff[i];
                var col = $(_5fe).datagrid("getColumnOption", _604);
                if (col) {
                    var _605 = _602[_604];
                    var _606 = col.styler ? (col.styler(_605, _602, _601) || "") : "";
                    var _607 = col.hidden ? "style=\"display:none;" + _606 + "\"" : (_606 ? "style=\"" + _606 + "\"": "");
                    cc.push("<td rowspan=\"" + _601b[_601] + "\" field=\"" + _604 + "\" " + _607 + ">");
                    if (col.checkbox) {
                        //省略…
                    }
                    cc.push("<div style=\"" + _607 + "\" ");
                    if (col.checkbox) {
                        //省略…
                    }
                    cc.push("\">");
                    if (col.checkbox) {
                        //省略…
                    }
                    cc.push("</div>");
                    cc.push("</td>");
                }
            }    
        }
        else{
            //省略…
        }
    }
    return cc.join("");
}
easyui DataGrid表体单元格跨列rowspan

3、通过以上的处理，就大功告成了，有问题继续看“问题处理”

四、问题处理

用IE8的朋友会出现表格高度不一致的现象，IE8兼容性不管怎么调都是不好用，原因是datagrid在装载完毕之后，会根据高度自动修改table样式，
这个是在function _474(_475, _476, _477)中进行处理的，把以下几行代码注释就可以了

easyui DataGrid表体单元格跨列rowspan
//_47b += c._outerHeight();
 
//_479.height(_47b);
//_47a.height(_47b);

//var _47d = Math.max(tr1.height(), tr2.height());
//tr1.css("height", _47d);
//tr2.css("height", _47d);
easyui DataGrid表体单元格跨列rowspan

 

 

--------------------------------------------
参考资料：
Jquery.easyui官方文档:http://www.jeasyui.com/documentation/index.php#

转载请注明出处http://www.cnblogs.com/panzhaohui

easyui DataGrid表体单元格跨列rowspan

上一篇：Following Orders（拓扑+dfs）


下一篇：mysql-update多表关联更新实战