基础DOM结构
什么叫“完整的基础DOM结构”，这里“基础”的意思是指这个结构不依赖具体数据，不依赖Datagrid的view属性，只要存在Datagrid实例就会存在这样的基础DOM结构；而“完整”的意思是指在冻结列，冻结行，标题，footer，分页这些功能块都存在时候的DOM结构。要搞清楚Datagrid的工作原理，这个DOM结构必须要烂熟于胸的，我们直接来看这个“基础完整DOM结构”是什么样子的：
对于这个DOM结构，我在HTML代码里面已经做了简单说明，这里提一下绑定于Datagrid宿主table上的对象的dc属性，这个dc属性存储了对DOM结构里不同部分的引用，获取dc属性的方法：
而dc属性跟DOM的对应关系，我也在html中做了详细注释，请大家自行查看，这些都是我们深入认识Datagrid组件的基础。
默认视图分析
上面对Datagrid组件的骨架做了很详细的描述。有了骨架还并不完整，还得有血有肉有衣服穿才行。强大的Datagrid组件允许我们自己定义如何在基础骨架上长出健壮诱人的身体，我们只要定义Datagrid的视图就可以实现。在大多数情况下，我们并无特别要求，Datagrid给我们提供了默认的视图，默认视图被使用在90%以上的场景，所以对默认视图的分析显得非常有必要。注意视图里面定义了哪些接口，哪些方法，如果要自己写视图的话，最好把这些接口和方法都写齐全。
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 = ["
}
}
//在rowIndex + 1前准确无误地插入，注意了，这里是前入式。
else {
opts.finder.getTr(target,rowIndex + 1,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,row);
//刷新，其中包含了重新布局grid面板等复杂得一笔的操作
//插入本是件很简单愉快的事情，可是你得为其后果负上沉重的代价
this.refreshRow.call(this,/**
*/
deleteRow: function(target,rowIndex) {
var state = $.data(target,"datagrid");
var opts = state.options;
var data = state.data;
function moveUpRows(frozen) {var whichBody = frozen ? 1 : 2;for(var i = rowIndex + 1; i < data.rows.length; i++) {var tr = opts.finder.getTr(target,whichBody);//"datagrid-row-index"和"id"<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>减一tr.attr("datagrid-row-index",i - 1);tr.attr("id",state.rowIdPrefix + "-" + whichBody + "-" + (i - 1));if(frozen && opts.rownumbers) {var rownumber = 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 {DOM object} target datagrid实例的宿主table对应的DOM对象
- @param {array} rows 要插入的数据
- @return {undefined} 默认未返回值
*/
onBeforeRender: function(target,rows) {},/** - 默认的onAfterRender 隐藏footer里的行号和check
- @param {DOM object} target datagrid实例的宿主table对应的DOM对象
- @return {undefined} 未返回值
*/
onAfterRender: function(target) {
var opts = $.data(target,"datagrid").options;
if(opts.showFooter) {
var footer = $(target).datagrid("getPanel").find("div.datagrid-footer");
footer.find("div.datagrid-cell-rownumber,div.datagrid-cell-check").css("visibility","hidden");
}
}
};
猜你在找的jQuery相关文章
| 获取用户定义的单元格样式，入参包括：单元格值，当前行数据，当前行索引(从0开始) var style = col.styler ? (col.styler(value,rowData,rowIndex) || "") : ""; //如果是隐藏列直接设置display为none，否则设置为用户想要的样式 var styler = col.hidden ? "style=\"display:none;" + style + "\"" : (style ? "style=\"" + style + "\"" : ""); cc.push(" | 用户定义的样式，即styler属性对datagrid自带的ck列是不起作用的。
if(col.checkBox) {
var styler = "";
} else {
var styler = "";
//设置文字对齐属性
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(" 增加"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("Box\" name=\"" + field + "\" value=\"" + (value != undefined ? value : "") + "\"/>");
}
//普通列
else {
/**
* 如果单元格有formatter，则将formatter后生成的DOM放到td>div里面
* 换句话说，td>div就是如来佛祖的五指山，而formatter只是孙猴子而已，猴子再怎么变化翻跟头，始终在佛祖手里。
*/
if(col.formatter) {
cc.push(col.formatter(value,rowIndex));
}
//操，这是最简单的简况了，将值直接放到td>div里面。
else {
cc.push(value);
}
}
cc.push(" ");
cc.push("function updateTableRow(frozen) {
var fields = $(target).datagrid("getColumnFields",frozen);
//这个地方查找grid的数据主体表格(可能包含冻结列对应的主体表格和普通列对应的主体表格)
//getTr这个函数，我在博客上介绍过，请参考：http://www.easyui.info/archives/396.html
var tr = opts.finder.getTr(target,"body",(frozen ? 1 : 2));
var checked = tr.find("div.datagrid-cell-check input[type=checkbox]").is(":checked");
//这里调用了renderRow方法来重新获取当前行的html字符串
tr.html(this.renderRow.call(this,rows[rowIndex]));
tr.attr("style",style || "");
//更新的时候保留checkbox状态(包含两层信息:一是有ck列;二是ck列被之前就被选中)
if(checked) {
tr.find("div.datagrid-cell-check input[type=checkbox]")._propAttr("checked",true);
}
};
//更新冻结列对应的行
updateTableRow.call(this,true);
//更新普通列对应的行
updateTableRow.call(this,false);
//重新布局表格面板
$(target).datagrid("fixRowHeight",rowIndex);
},insertRow: function(target,row) {
|