最近做项目用到了jquery easyui,其中一组DataGrid做的报表是给客户大领导看的，客户要求报表样式跟他们原有系统的一模一样（如下图1）。
DataGrid样式好调，只是城市名称单元格跨行这个难度稍大，本着用户体验无尺度的用户价值观，无尺度的修改了easyui源代码
图1 – “城市”和“名称”列跨行的处理效果
一、分析准备：
1、jquery版本：1.8.0;easyui版本：1.3.2
2、首先读easyui文档，只有关于表头rowspan和colspan的配置的方式，表体装载数据的配置并没有介绍有关rowspan和colspan的，
再仔细读，发现文档中有如下内容：
图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右所示的样式
图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;
确定两个数组变量以及针对它们的处理：
//记录需要跨列的单元格行号
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;
}
}
通过两个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、修改：
// 读取表中内容
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{
//其它列的内容按照正常模式装载
}
}
通过以上修改，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)
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(""));
}
2、编写renderRowNew方法：
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("");
}
3、通过以上的处理，就大功告成了，有问题继续看“问题处理”
四、问题处理
用IE8的朋友会出现表格高度不一致的现象，IE8兼容性不管怎么调都是不好用，原因是datagrid在装载完毕之后，会根据高度自动修改table样式，
这个是在function _474(_475, _476, _477)中进行处理的，把以下几行代码注释就可以了
//_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);
--------------------------------------------
参考资料：
Jquery.easyui官方文档:http://www.jeasyui.com/documentation/index.php#
转载请注明出处http://www.cnblogs.com/panzhaohui