最近重构原有系统,需要将treeview改写成无刷新的形式,曾尝试对TreeView控件进行操作,但是太麻烦,无奈放弃.同事向我推荐了dtree,看了还不错,不过并不支持动态添加和删除节点,好在它的代码比较简单,直接修改了它的代码.点这里可以下载.压缩包里有全部的代码.主要的思路也是来自网上的一篇文章,用了一个备用数组存放之前的数据. 

但是在使用的过程中我也发现dtree的一个不便之处,就是它的ID必须是从0开始的索引,因为这个索引实际上是它存储节点数据的数组索引,无奈我对其节点对象进行了扩展,令其可以支持自己的节点ID

 1function Node(id, pid, name, url,cid,cpid, title, target, icon, iconOpen, open) {
 2    this.id = id;
 3    this.pid = pid;
 4    this.name = name;
 5    this.url = url;
 6    this.title = title;
 7    this.target = target;
 8    this.icon = icon;
 9    this.iconOpen = iconOpen;
10    this._io = open || false;
11    this._is = false;
12    this._ls = false;
13    this._hc = false;
14    this._ai = 0;
15    this._p;    
16    this.cid=cid;  //自定义的ID
17    this.cpid=cpid; //自定义的父ID
18};

另外,由于dtree的每个节点都已经定义了onclick事件(进行节点的展开和折叠),所以并不支持自己的事件(也可能是我没找到),所以我自己重新定义了一个. 

dTree.prototype.delegate=function(cid,cpid){}

 其中的cid和cpid是自定义的ID和父ID.然后在具体调用的页面像下面这样写就可以了.

a.delegate=function(accountID,accountPID)
{    
      //你的代码
}

至于添加和删除节点就不是很难了,大家自己看代码就可以了:)