yui2 datatable转换至yui3

网上有很多简便的方法，例如说 直接include进来就用啊。 我还是坚持在compat的基础上融合进来；不过说到完美程度，是不及完整理解yui3的类库后再重写。但是第一目标：可用，第二目标：自己看着舒服

 

首先是Element的依赖，直接吸收。还没有找yui3里面有没有对应的类。如果没有就以yui2的element了。

datasource，也是直接吸收。因为现在还不清楚yui3 的datasource（尚处于beta） 与yui2的差异。（看表现形式是有差异，但核心本质应该不变）

 

转换最常见的问题还是事务的处理方式；yui2中的事务响应代码，用this 就可以引用到事件的发布者，但yui3不行，解决的方法是在on的时候，相应代码用Y.bind来捆绑this。达到传递this的目的。还有一种思路是在on方法后面跟参数，但是需要修改事件相应代码的接口，抑或是用arguments 来获取，增加了一些负担。不过后者应该在执行期比较高效。（只是传值，并不产生新的实例）

 

 

关于id的部分，有一句超级陷阱：

elTh.id = this.getId() + "-th-" + oColumn.getSanitizedKey();

 

elTh是一个通过appendChild 返回的对象

 

elTh = elTheadTr.appendChild(document.createElement("th"));

 

 

在yui2里面，elTh等于是dom对象了。但是在yui3里面发生了变化。elTh不是一个dom对象，是一个yui3血统的object。（貌似就是Node？）,里面用_node 引用了dom对象， 所以在yui3里面，一定要思路清晰的是，每个从yui3标准方法返回的对象，都已经是包装过了（yui2也这么干了，但是在方法 使用上没有那么清晰的界限 【指dom方法属性和原型方法属性】）

 

所以不能直接赋值id来 改变对方的dom名字了。这就像把别人家的门牌号改了，就期望住在里面的人的名字也修改了一样，是无效的行为。

所以，修改方法很简单：

 

elTh.set('id',this.getId() + "-th-" + oColumn.getSanitizedKey());

 

 

经过如上的处理，终于来到了loading画面

this.showTableMessage(this.get("MSG_LOADING"), DT.CLASS_LOADING);

 

接下去，还是跟着代码走

 

8.6 补充说明

 

经过研究，compat.js 已经对Dom对象获取方式进行了转换，即使用Y.util.Dom.get方法，拿到的对象是一个w3c dom node。并非是一个YUI3 node，因此可以兼容yui2 对node的操作方式（如 obj.innerHTML  / obj.style.display 之类），也因此无需可以做转换（如：obj.set('innerHTML','')  / obj.setStyle('display','') ;  ） 也减少了转换代码量。【针对datatable.js 而言】