基础DOM结构
什么叫“完整的基础DOM结构”,这里“基础”的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会存在这样的基础DOM结构;而“完整”的意思是指在冻结列,冻结行,标题,footer,分页这些功能块都存在时候的DOM结构。要搞清楚Datagrid的工作原理,这个DOM结构必须要烂熟于胸的,我们直接来看这个“基础完整DOM结构”是什么样子的:
获取用户定义的单元格样式,入参包括:单元格值,当前行数据,当前行索引(从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(" |