jQuery EasyUI框架中的Datagrid数据表格组件结构详解
基础DOM结构
什么叫“完整的基础DOM结构”，这里“基础”的意思是指这个结构不依赖具体数据，不依赖Datagrid的view属性，只要存在Datagrid实例就会存在这样的基础DOM结构；而“完整”的意思是指在冻结列，冻结行，标题，footer，分页这些功能块都存在时候的DOM结构。
要搞清楚Datagrid的工作原理，这个DOM结构必须要烂熟于胸的，我们直接来看这个“基础完整DOM结构”是什么样子的：
<!--datagrid的最外层容器，可以使用$(target).datagrid('getPanel')或者$.data(target,'datagrid').panel得到这个DOM对象，这个DOM上其实承载了panel组件-->
<divclass="paneldatagrid">
<!--datagrid的标题区域容器，对应于panel组件的header部分，可以使用$(target).datagrid('getPanel').panel('header')得到这个DOM对象-->
<divclass="panel-header">
<divclass="panel-title"></div>
<divclass="panel-tool"></div>
</div>
<!--datagrid的主体区域容器，对应于panel组件的body部分，可以使用$(target).datagrid('getPanel').panel('body')得到这个DOM对象-->
<divclass="datagrid-wrappanel-body">
<!--工具栏-->
<divclass="datagrid-toolbar"></div>
<!--datagrid视图部分的容器，这是datagrid组件DOM结构的核心，其基础视图结构跟datagrid的view属性无任何关系。-->
<!--对应dc.view-->
<divclass="datagrid-view">
<!--div.datagrid-view1负责展示冻结列部分(包含行号或者frozenColumns)的数据-->
<!--对应dc.view1-->
<divclass="datagrid-view1">
<!--列标题部分-->
<divclass="datagrid-header">
<!--对应dc.header1-->
<divclass="datagrid-header-inner">
<!--样式里有htable关键字，h代表header的意思-->
<tableclass="datagrid-htable">
<tbody>
<trclass="datagrid-header-row"></tr>
</tbody>
</table>
</div>
</div>
<!--列数据部分-->
<divclass="datagrid-body">
<!--对应dc.body1-->
<divclass="datagrid-body-inner">
<!--frozenRows部分(有数据才会有这个table，故不属于基础DOM结构)，固定行是1.3.2版本之后才加的功能，注意datagrid-btable-frozen关键样式，btable代码bodytable的意思-->
<tableclass="datagrid-btabledatagrid-btable-frozen"></table>
<!--普通rows部分(有数据才会有这个table，故不属于基础DOM结构)-->
<tableclass="datagird-btable"></table>
</div>
</div>
<!--footer部分-->
<divclass="datagrid-footer">
<!--对应dc.footer1-->
<divclass="datagrid-footer-inner">
<!--ftable代表footertable的意思-->
<tableclass="datagrid-ftable"></table>
</div>
</div>
</div>
<!--div.datagrid-view2负责展示非冻结列部分的数据，大家注意到冻结列和普通列视图是分开的，也就是说冻结列和普通列是在不同表格中展示的，这样会产生一个问题，那就是两个表格行高之间的同步问题。-->
<!--对应dc.view2-->
<divclass="datagrid-view2">
<!--列标题部分-->
<divclass="datagrid-header">
<!--对应dc.header2-->
<divclass="datagrid-header-inner">
<tableclass="datagrid-htable">
<tbody>
<trclass="datagrid-header-row"></tr>
</tbody>
</table>
</div>
</div>
<!--列数据部分，注意这里并无datagrid-body-inner这个子元素，而冻结列对应的body却是有的，这个是细微区别-->
<!--对应dc.body2-->
<divclass="datagrid-body">
<!--frozenRows部分有数据才会有这个table，故不属于基础DOM结构，固定行是1.3.2版本之后才加的功能，-->
<tableclass="datagrid-btabledatagrid-btable-frozen"></table>
<tableclass="datagrid-btable"></table>
</div>
<!--footer部分-->
<divclass="datagrid-footer">
<!--对应dc.footer2-->
<divclass="datagrid-footer-inner">
<tableclass="datagrid-ftable"></table>
</div>
</div>
</div>
</div>
<!--分页部分-->
<divclass="datagrid-pagerpagination"></div>
</div>
</div>
对于这个DOM结构，我在html代码里面已经做了简单说明，这里提一下绑定于Datagrid宿主table上的对象的dc属性，这个dc属性存储了对DOM结构里不同部分的引用，获取dc属性的方法：
$.data(target,'datagrid').dc;
而dc属性跟DOM的对应关系，我也在html中做了详细注释，请大家自行查看，这些都是我们深入认识Datagrid组件的基础。
默认视图分析
上面对Datagrid组件的骨架做了很详细的描述。有了骨架还并不完整，还得有血有肉有衣服穿才行。强大的Datagrid组件允许我们自己定义如何在基础骨架上长出健壮诱人的身体，我们只要定义Datagrid的视图就可以实现。
在大多数情况下，我们并无特别要求，Datagrid给我们提供了默认的视图，默认视图被使用在90%以上的场景，所以对默认视图的分析显得非常有必要。注意视图里面定义了哪些接口，哪些方法，如果要自己写视图的话，最好把这些接口和方法都写齐全。
varview={
/**
*填充表格主体数据(生成数据部分的各行tr)
*@param{DOMobject}targetdatagrid宿主table对应的DOM对象
*@param{DOMobject}container数据主体容器。包含两个可能的值，即：
*1.frozen部分body1，对应的DOM对象为：div.datagrid-view>div.datagrid-view1>div.datagrid-body>div.datagrid-body-inner
*2.常规部分body2，对应的DOM对象为：div.datagrid-view>div.datagrid-view2>div.datagrid-body
*@param{boolean}frozen是否是冻结列
*@return{undefined}未返回值
*/
render:function(target,container,frozen){
vardata=$.data(target,"datagrid");
varopts=data.options;
varrows=data.data.rows;
varfields=$(target).datagrid("getColumnFields",frozen);
if(frozen){
//如果grid不显示rownumbers并且也没有frozenColumns的话，直接退出。
if(!(opts.rownumbers||(opts.frozenColumns&&opts.frozenColumns.length))){
return;
}
}
//定义表格字符串，注意这里使用了数组的join方式代替了传统的"+"运算符，在大多浏览器中，这样效率会更高些。
varhtml=["<tableclass=\"datagrid-btable\"cellspacing=\"0\"cellpadding=\"0\"border=\"0\"><tbody>"];
for(vari=0;i<rows.length;i++){
//striped属性，用于设置grid数据是否隔行变色，当然了实现原理很简单。
varcls=(i%2&&opts.striped)?"class=\"datagrid-rowdatagrid-row-alt\"":"class=\"datagrid-row\"";
/**
*表格的rowStyler属性用于处理数据行的css样式，当然了这个样式仅仅是作用于tr标签上。
*这地方使用call了方法来设置上下文，如果rowStyler函数内部使用了this的话，则this指向datagrid的宿主table对应的DOM对象。
*/
varstyle=opts.rowStyler?opts.rowStyler.call(target,i,rows[i]):"";
varstyler=style?"style=\""+style+"\"":"";
/**
*rowId：行的唯一标示，对应于tr的id属性，其由以下几部分组成：
*1.字符窜常量："datagrid-row-r";
*2.全局索引index：该索引值从1开始递增，同一个datagrid组件实例拥有唯一值，如果同一页面内有多个datagrid实例，那么其值从1递增分配给每个datagrid实例；
*3.冻结列标识frozen：该标识用于标示是否是冻结列(包含行号和用户指定的frozenColumns)，"1"代表冻结列，"2"代表非冻结列；
*4.行数索引：该值才是真正代表“第几行”的意思，该值从0开始递增
*如页面内第一个datagrid实例的非冻结列第10行数据的rowId为"datagrid-row-r1-2-9"
*/
varrowId=data.rowIdPrefix+"-"+(frozen?1:2)+"-"+i;
html.push("<trid=\""+rowId+"\"datagrid-row-index=\""+i+"\""+cls+""+styler+">");
/**
*调用renderRow方法，生成行数据(行内的各列数据)。
*这里的this就是opts.view，之所以用call方法，只是为了传参进去。这里我们使用this.renderRow(target,fields,frozen,i,rows[i])来调用renderRow方法应该也是可以的。
*/
html.push(this.renderRow.call(this,target,fields,frozen,i,rows[i]));
html.push("</tr>");
}
html.push("</tbody></table>");
//用join方法完成字符创拼接后直接innerHTML到容器内。
$(container).html(html.join(""));
},
/**
*[renderFooterdescription]
*@param{DOMobject}targetdatagrid宿主table对应的DOM对象
*@param{DOMobject}container可能为dc.footer1或者dc.footer2
*@param{boolean}frozen是否为frozen区
*@return{undefined}未返回值
*/
renderFooter:function(target,container,frozen){
varopts=$.data(target,"datagrid").options;
//获取footer数据
varrows=$.data(target,"datagrid").footer||[];
varcolumnsFields=$(target).datagrid("getColumnFields",frozen);
//生成footer区的table
varfooterTable=["<tableclass=\"datagrid-ftable\"cellspacing=\"0\"cellpadding=\"0\"border=\"0\"><tbody>"];
for(vari=0;i<rows.length;i++){
footerTable.push("<trclass=\"datagrid-row\"datagrid-row-index=\""+i+"\">");
footerTable.push(this.renderRow.call(this,target,columnsFields,frozen,i,rows[i]));
footerTable.push("</tr>");
}
footerTable.push("</tbody></table>");
$(container).html(footerTable.join(""));
},
/**
*生成某一行数据
*@param{DOMobject}targetdatagrid宿主table对应的DOM对象
*@param{array}fieldsdatagrid的字段列表
*@param{boolean}frozen是否为冻结列
*@param{number}rowIndex行索引(从0开始)
*@param{jsonobject}rowData某一行的数据
*@return{string}单元格的拼接字符串
*/
renderRow:function(target,fields,frozen,rowIndex,rowData){
varopts=$.data(target,"datagrid").options;
//用于拼接字符串的数组
varcc=[];
if(frozen&&opts.rownumbers){
//rowIndex从0开始，而行号显示的时候是从1开始，所以这里要加1.
varrowNumber=rowIndex+1;
//如果分页的话，根据页码和每页记录数重新设置行号
if(opts.pagination){
rowNumber+=(opts.pageNumber-1)*opts.pageSize;
}
/**
*先拼接行号列
*注意DOM特征，用zenCoding可表达为"td.datagrid-td-rownumber>div.datagrid-cell-rownumber"
*/
cc.push("<tdclass=\"datagrid-td-rownumber\"><divclass=\"datagrid-cell-rownumber\">"+rowNumber+"</div></td>");
}
for(vari=0;i<fields.length;i++){
varfield=fields[i];
varcol=$(target).datagrid("getColumnOption",field);
if(col){
varvalue=rowData[field];
//获取用户定义的单元格样式，入参包括：单元格值，当前行数据，当前行索引(从0开始)
varstyle=col.styler?(col.styler(value,rowData,rowIndex)||""):"";
//如果是隐藏列直接设置display为none，否则设置为用户想要的样式
varstyler=col.hidden?"style=\"display:none;"+style+"\"":(style?"style=\""+style+"\"":"");
cc.push("<tdfield=\""+field+"\""+styler+">");
//如果当前列是datagrid组件保留的ck列时，则忽略掉用户定义的样式，即styler属性对datagrid自带的ck列是不起作用的。
if(col.checkbox){
varstyler="";
}else{
varstyler="";
//设置文字对齐属性
if(col.align){
styler+="text-align:"+col.align+";";
}
//设置文字超出td宽时是否自动换行(设置为自动换行的话会撑高单元格)
if(!opts.nowrap){
styler+="white-space:normal;height:auto;";
}else{
/**
*并不是nowrap属性为true单元格就肯定不会被撑高，这还得看autoRowHeight属性的脸色
*当autoRowHeight属性为true的时候单元格的高度是根据单元格内容而定的，这种情况主要是用于表格里展示图片等媒体。
*/
if(opts.autoRowHeight){
styler+="height:auto;";
}
}
}
//这个地方要特别注意，前面所拼接的styler属性并不是作用于td标签上，而是作用于td下的div标签上。
cc.push("<divstyle=\""+styler+"\"");
//如果是ck列，增加"datagrid-cell-check"样式类
if(col.checkbox){
cc.push("class=\"datagrid-cell-check");
}
//如果是普通列，增加"datagrid-cell-check"样式类
else{
cc.push("class=\"datagrid-cell"+col.cellClass);
}
cc.push("\">");
/**
*ck列光设置class是不够的，当突然还得append一个input进去才是真正的checkbox。此处未设置input的id，只设置了name属性。
*我们注意到formatter属性对datagird自带的ck列同样不起作用。
*/
if(col.checkbox){
cc.push("<inputtype=\"checkbox\"name=\""+field+"\"value=\""+(value!=undefined?value:"")+"\"/>");
}
//普通列
else{
/**
*如果单元格有formatter，则将formatter后生成的DOM放到td>div里面
*换句话说，td>div就是如来佛祖的五指山，而formatter只是孙猴子而已，猴子再怎么变化翻跟头，始终在佛祖手里。
*/
if(col.formatter){
cc.push(col.formatter(value,rowData,rowIndex));
}
//操，这是最简单的简况了，将值直接放到td>div里面。
else{
cc.push(value);
}
}
cc.push("</div>");
cc.push("</td>");
}
}
//返回单元格字符串，注意这个函数内部并未把字符串放到文档流中。
returncc.join("");
},
/**
*刷新行数据，只有一个行索引(从0开始)，调用的updateRow方法，这里直接跳过。
*@param{DOMobject}targetdatagrid实例的宿主table对应的DOM对象
*@param{number}rowIndex行索引(从0开始)
*@return{undefined}未返回数据
*/
refreshRow:function(target,rowIndex){
this.updateRow.call(this,target,rowIndex,{});
},
/**
*刷新行数据，该接口方法肩负着同步行高，重新计算和布局grid面板等重任
*@param{DOMobject}targetdatagrid实例的宿主table对应的DOM对象
*@param{number}rowIndex行索引(从0开始)
*@param{jsonobject}行数据
*@return{undefined}未返回数据
*/
updateRow:function(target,rowIndex,row){
varopts=$.data(target,"datagrid").options;
varrows=$(target).datagrid("getRows");
$.extend(rows[rowIndex],row);
varstyle=opts.rowStyler?opts.rowStyler.call(target,rowIndex,rows[rowIndex]):"";
functionupdateTableRow(frozen){
varfields=$(target).datagrid("getColumnFields",frozen);
//这个地方查找grid的数据主体表格(可能包含冻结列对应的主体表格和普通列对应的主体表格)
//getTr这个函数，我在博客上介绍过，请参考：http://www.easyui.info/archives/396.html
vartr=opts.finder.getTr(target,rowIndex,"body",(frozen?1:2));
varchecked=tr.find("div.datagrid-cell-checkinput[type=checkbox]").is(":checked");
//这里调用了renderRow方法来重新获取当前行的html字符串
tr.html(this.renderRow.call(this,target,fields,frozen,rowIndex,rows[rowIndex]));
tr.attr("style",style||"");
//更新的时候保留checkbox状态(包含两层信息:一是有ck列;二是ck列被之前就被选中)
if(checked){
tr.find("div.datagrid-cell-checkinput[type=checkbox]")._propAttr("checked",true);
}
};
//更新冻结列对应的行
updateTableRow.call(this,true);
//更新普通列对应的行
updateTableRow.call(this,false);
//重新布局表格面板
$(target).datagrid("fixRowHeight",rowIndex);
},
insertRow:function(target,rowIndex,row){
varstate=$.data(target,"datagrid");
//options
varopts=state.options;
//documentofdatagrid
vardc=state.dc;
vardata=state.data;
//兼容无效的rowIndex，默认设置为在最后一行追加
if(rowIndex==undefined||rowIndex==null){
rowIndex=data.rows.length;
}
//为啥不跟上面的条件并到一起，真是蛋疼
if(rowIndex>data.rows.length){
rowIndex=data.rows.length;
}
/**
*下移rows
*@param{boolean}frozen是否为frozen部分
*@return{undefined}无返回值
*/
functionmoveDownRows(frozen){
//1:冻结列部分；2:普通列部分
varwhichBody=frozen?1:2;
for(vari=data.rows.length-1;i>=rowIndex;i--){
vartr=opts.finder.getTr(target,i,"body",whichBody);
//注意这地方设置了tr的"datagrid-row-index"和"id"属性
tr.attr("datagrid-row-index",i+1);
tr.attr("id",state.rowIdPrefix+"-"+whichBody+"-"+(i+1));
//计算行号
if(frozen&&opts.rownumbers){
//因rowIndex从0开始，以及须插入位置以下的tr要统一下移，所以新行号为i+2
varrownumber=i+2;
//有分页的话，行号还要加上分页数据
if(opts.pagination){
rownumber+=(opts.pageNumber-1)*opts.pageSize;
}
tr.find("div.datagrid-cell-rownumber").html(rownumber);
}
}
};
/**
*插入了，要插两个地方的哦(如果你是男人，你可以淫荡地笑一下)
*@param{boolean}frozen是否是frozen部分
*@return{undefined}未返回值
*/
functiondoInsert(frozen){
varwhichBody=frozen?1:2;
//这行代码，不知道是干嘛的，怕插入得太快而早早缴械，所以才故意拖延时间的么？
varcolumnFields=$(target).datagrid("getColumnFields",frozen);
//构造新插入行的id属性
vartrId=state.rowIdPrefix+"-"+whichBody+"-"+rowIndex;
vartr="<trid=\""+trId+"\"class=\"datagrid-row\"datagrid-row-index=\""+rowIndex+"\"></tr>";
if(rowIndex>=data.rows.length){
//如果已经有记录，则插入tr即可
if(data.rows.length){
//嗯哼，getTr的这个用法不多哦，未传入行索引，第三个参数为"last",随便的意淫一下就知道是获取最后一行了
//然后再在最后一行后插入一行，注意了，这里用的后入式
opts.finder.getTr(target,"","last",whichBody).after(tr);
}
//如果表格尚无记录，则要生成表格，同时插入tr
else{
varcc=frozen?dc.body1:dc.body2;
cc.html("<tablecellspacing=\"0\"cellpadding=\"0\"border=\"0\"><tbody>"+tr+"</tbody></table>");
}
}
//在rowIndex+1前准确无误地插入，注意了，这里是前入式。
else{
opts.finder.getTr(target,rowIndex+1,"body",whichBody).before(tr);
}
};
//下移frozen部分
moveDownRows.call(this,true);
//下移普通列部分
moveDownRows.call(this,false);
//插入frozen区
doInsert.call(this,true);
//插入普通区
doInsert.call(this,false);
//总数加1
data.total+=1;
//维护data.rows数组，这地方是插入一个数组元素了
data.rows.splice(rowIndex,0,row);
//刷新，其中包含了重新布局grid面板等复杂得一笔的操作
//插入本是件很简单愉快的事情，可是你得为其后果负上沉重的代价
this.refreshRow.call(this,target,rowIndex);
},
/**
*删除行接口
*@param{DOMobject}targetdatagrid实例的宿主table对应的DOM对象
*@param{number}rowIndex行索引
*@return{undefined}未返回值
*/
deleteRow:function(target,rowIndex){
varstate=$.data(target,"datagrid");
varopts=state.options;
vardata=state.data;
functionmoveUpRows(frozen){
varwhichBody=frozen?1:2;
for(vari=rowIndex+1;i<data.rows.length;i++){
vartr=opts.finder.getTr(target,i,"body",whichBody);
//"datagrid-row-index"和"id"属性减一
tr.attr("datagrid-row-index",i-1);
tr.attr("id",state.rowIdPrefix+"-"+whichBody+"-"+(i-1));
if(frozen&&opts.rownumbers){
varrownumber=i;
if(opts.pagination){
rownumber+=(opts.pageNumber-1)*opts.pageSize;
}
tr.find("div.datagrid-cell-rownumber").html(rownumber);
}
}
};
//移除行
opts.finder.getTr(target,rowIndex).remove();
//上移frozen区
moveUpRows.call(this,true);
//上移普通区
moveUpRows.call(this,false);
//记录数减一
data.total-=1;
//维护data.rows数据
data.rows.splice(rowIndex,1);
},
/**
*默认的onBeforeRender事件为空
*@param{DOMobject}targetdatagrid实例的宿主table对应的DOM对象
*@param{array}rows要插入的数据
*@return{undefined}默认未返回值
*/
onBeforeRender:function(target,rows){},
/**
*默认的onAfterRender隐藏footer里的行号和check
*@param{DOMobject}targetdatagrid实例的宿主table对应的DOM对象
*@return{undefined}未返回值
*/
onAfterRender:function(target){
varopts=$.data(target,"datagrid").options;
if(opts.showFooter){
varfooter=$(target).datagrid("getPanel").find("div.datagrid-footer");
footer.find("div.datagrid-cell-rownumber,div.datagrid-cell-check").css("visibility","hidden");
}
}
};