dklogs

dTable动态表格更新记录。

点击查看演示效果

1.对行事件的处理进行了修改和完善。由对每一个tr对象进行事件注册改为事件委托。

2.对功能菜单按钮和上下文菜单选项进行了枚举化。避免不必要的错误。

3.对整体的性能进行微调。

1.由事件委托代替为每一行注册事件

在上一个版本中，行的点击和上下文菜单事件都是在控件初始化的时候通过遍历tr来为每一个tr添加的。这样做比较直观方便，但是缺点也是很明显的，那就是要为每一个tr注册事件，占用了大量的内存空间，降低了执行效率，同时也增加了内存泄漏的风险。

这个新的版本中采用的是事件委托的方法来处理行的点击和上下文菜单事件。具体就是将事件注册到table对象上，然后通过事件的冒泡特性，来判断当前事件触发的对象是属于哪一行，然后对相应的行进行操作。

事件委托相关代码

//事件委托的类型
eventDelegationType: {
oclick: 0,
ocontextMenu: 1
}
//使用事件委托来处理行的点击事件
registEventDelegation: function(eventType, e){
ovar target = e.target || e.srcElement;
otarget = this.getDataRowDom(target);
oif (target.rowIndex >= this.headNum) {
o    switch (eventType) {
o        case this.eventDelegationType.click:
o            this.rowSelect(target, e);
o            break;
o        case this.eventDelegationType.contextMenu:
o            this.customContextMenu(target, e);
o            break;
o        default:
o            return false;
o    }
o}
}
//获取数据行的DOM对象
getDataRowDom: function(ele){
owhile (ele.nodeName != 'TR' && ele.parentNode) {
o    ele = ele.parentNode;
o}
oif (ele.nodeName != 'TR') {
o    return false;
o}
oelse {
o    return ele;
o}
}

具体更多事件委托方面的知识请点击查看Event delegation in JavaScript

2.对功能按钮和上下文菜单进行了枚举化。在作为参数传入的时候，通过json对象中的选项进行传入，避免拼错单词等情况可能造成的失误。

3.对性能进行了一定的优化。

当行数达到500行的时候全部样式重置，在IE下需要530ms左右，FX下需要620ms左右，在Opera下需要60ms左右。（数据是在P2.8GHz，2G内存，ATI X1600Pro条件下，测试三次得到的平均值）

当行数不超过300行时，使用无明显延迟感，当超过300行时有延迟感，当超过1000行时有明显延迟感。

注意：在重新部署的时候需要对FuncMenu.prefixURL进行设置，否则可能会出现功能按钮找不到相对应的图标的情况。

点击下载源代码dTableV0.2

ps.貌似发现一个小问题，在用递归不断获取一个对象的parentNode的时候超过两层则无法返回正确的值，返回的都是undefined，而用while则没有这个问题，还请了解的同学给予解释，万分感谢。

转载请注明原文出处《Javascript 动态表格 Grid 更新记录》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。