世纪之光 通过本文主要向大家介绍了jQuery,EasyUI,Datagrid,jQuery,JavaScript,js等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
基础DOM结构
什么叫“完整的基础DOM结构”，这里“基础”的意思是指这个结构不依赖具体数据，不依赖Datagrid的view属性，只要存在Datagrid实例就会存在这样的基础DOM结构；而“完整”的意思是指在冻结列，冻结行，标题，footer，分页这些功能块都存在时候的DOM结构。
要搞清楚Datagrid的工作原理，这个DOM结构必须要烂熟于胸的，我们直接来看这个“基础完整DOM结构”是什么样子的：
<!-- datagrid的最外层容器，可以使用$(target).datagrid('getPanel')或者$.data(target,'datagrid').panel得到这个DOM对象，这个DOM上其实承载了panel组件-->
<div class="panel datagrid">
<!-- datagrid的标题区域容器，对应于panel组件的header部分，可以使用$(target).datagrid('getPanel').panel('header')得到这个DOM对象-->
<div class="panel-header">
<div class="panel-title"></div>
<div class="panel-tool"></div>
</div>
<!-- datagrid的主体区域容器，对应于panel组件的body部分，可以使用$(target).datagrid('getPanel').panel('body')得到这个DOM对象-->
<div class="datagrid-wrap panel-body">
<!--工具栏-->
<div class="datagrid-toolbar"></div>
<!-- datagrid视图部分的容器，这是datagrid组件DOM结构的核心，其基础视图结构跟datagrid的view属性无任何关系。-->
<!-- 对应dc.view -->
<div class="datagrid-view">
<!-- div.datagrid-view1负责展示冻结列部分(包含行号或者frozenColumns)的数据-->
<!-- 对应dc.view1 -->
<div class="datagrid-view1">
<!--列标题部分-->
<div class="datagrid-header">
<!-- 对应dc.header1 -->
<div class="datagrid-header-inner">
<!--样式里有htable关键字，h代表header的意思-->
<table class="datagrid-htable">
<tbody>
<tr class="datagrid-header-row"></tr>
</tbody>
</table>
</div>
</div>
<!--列数据部分-->
<div class="datagrid-body">
<!-- 对应dc.body1 -->
<div class="datagrid-body-inner">
<!--frozenRows部分(有数据才会有这个table，故不属于基础DOM结构)，固定行是1.3.2版本之后才加的功能，注意datagrid-btable-frozen关键样式，btable代码body table的意思-->
<table class="datagrid-btable datagrid-btable-frozen"></table>
<!--普通rows部分(有数据才会有这个table，故不属于基础DOM结构)-->
<table class="datagird-btable"></table>
</div>
</div>
<!--footer部分-->
<div class="datagrid-footer">
<!-- 对应dc.footer1 -->
<div class="datagrid-footer-inner">
<!--ftable代表footer table的意思-->
<table class="datagrid-ftable"></table>
</div>
</div>
</div>
<!-- div.datagrid-view2负责展示非冻结列部分的数据，大家注意到冻结列和普通列视图是分开的，也就是说冻结列和普通列是在不同表格中展示的，这样会产生一个问题，那就是两个表格行高之间的同步问题。-->
<!-- 对应dc.view2 -->
<div class="datagrid-view2">
<!--列标题部分-->
<div class="datagrid-header">
<!-- 对应dc.header2 -->
<div class="datagrid-header-inner">
<table class="datagrid-htable">
<tbody>
<tr class="datagrid-header-row"></tr>
</tbody>
</table>
</div>
</div>
<!--列数据部分，注意这里并无datagrid-body-inner这个子元素，而冻结列对应的body却是有的，这个是细微区别-->
<!-- 对应dc.body2 -->
<div class="datagrid-body">
<!--frozenRows部分有数据才会有这个table，故不属于基础DOM结构，固定行是1.3.2版本之后才加的功能，-->
<table class="datagrid-btable datagrid-btable-frozen"></table>
<table class="datagrid-btable"></table>
</div>
<!--footer部分-->
<div class="datagrid-footer">
<!-- 对应dc.footer2 -->
<div class="datagrid-footer-inner">
<table class="datagrid-ftable"></table>
</div>
</div>
</div>
</div>
<!--分页部分-->
<div class="datagrid-pager pagination"></div>
</div>
</div>
对于这个DOM结构，我在html代码里面已经做了简单说明，这里提一下绑定于Datagrid宿主table上的对象的dc属性，这个dc属性存储了对DOM结构里不同部分的引用，获取dc属性的方法：
$.data(target,'datagrid').dc;
而dc属性跟DOM的对应关系，我也在html中做了详细注释，请大家自行查看，这些都是我们深入认识Datagrid组件的基础。
默认视图分析
上面对Datagrid组件的骨架做了很详细的描述。有了骨架还并不完整，还得有血有肉有衣服穿才行。强大的Datagrid组件允许我们自己定义如何在基础骨架上长出健壮诱人的身体，我们只要定义Datagrid的视图就可以实现。
在大多数情况下，我们并无特别要求，Datagrid给我们提供了默认的视图，默认视图被使用在90%以上的场景，所以对默认视图的分析显得非常有必要。注意视图里面定义了哪些接口，哪些方法，如果要自己写视图的话，最好把这些接口和方法都写齐全。
var view = {
/**
* 填充表格主体数据(生成数据部分的各行tr)
* @param {DOM object} target datagrid宿主table对应的DOM对象
* @param {DOM object} 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) {
var data = $.data(target, "datagrid");
var opts = data.options;
var rows = data.data.rows;
var fields = $(target).datagrid("getColumnFields", frozen);
if(frozen) {
//如果grid不显示rownumbers并且也没有frozenColumns的话，直接退出。
if(!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))) {
return;
}
}
//定义表格字符串，注意这里使用了数组的join方式代替了传统的"+"运算符，在大多浏览器中，这样效率会更高些。
var html = ["<table class=\"datagrid-btable\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\"><tbody>"];
for(var i = 0; i < rows.length; i++) {
//striped属性，用于设置grid数据是否隔行变色，当然了实现原理很简单。
var cls = (i % 2 && opts.striped) ? "class=\"datagrid-row datagrid-row-alt\"" : "class=\"datagrid-row\"";
/**
* 表格的rowStyler属性用于处理数据行的css样式，当然了这个样式仅仅是作用于tr标签上。
* 这地方使用call了方法来设置上下文，如果rowStyler函数内部使用了this的话，则this指向datagrid的宿主table对应的DOM对象。
*/
var style = opts.rowStyler ? opts.rowStyler.call(target, i, rows[i]) : "";
var styler = style ? "style=\"" + style + "\"" : "";
/**
* rowId：行的唯一标示，对应于tr的id属性，其由以下几部分组成：
* 1.字符窜常量："datagrid-row-r";
* 2.全局索引index：该索引值从1开始递增，同一个datagrid组件实例拥有唯一值，如果同一页面内有多个datagrid实例，那么其值从1递增分配给每个datagrid实例；
* 3.冻结列标识frozen：该标识用于标示是否是冻结列(包含行号和用户指定的frozenColumns)，"1"代表