最近重构原有系统,需要将treeview改写成无刷新的形式,曾尝试对TreeView控件进行操作,但是太麻烦,无奈放弃.同事向我推荐了dtree,看了还不错,不过并不支持动态添加和删除节点,好在它的代码比较简单,直接修改了它的代码.点这里可以下载.压缩包里有全部的代码.主要的思路也是来自网上的一篇文章,用了一个备用数组存放之前的数据.
但是在使用的过程中我也发现dtree的一个不便之处,就是它的ID必须是从0开始的索引,因为这个索引实际上是它存储节点数据的数组索引,无奈我对其节点对象进行了扩展,令其可以支持自己的节点ID
1
function 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
};
function 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; //自定义的ID17
this.cpid=cpid; //自定义的父ID18
};另外,由于dtree的每个节点都已经定义了onclick事件(进行节点的展开和折叠),所以并不支持自己的事件(也可能是我没找到),所以我自己重新定义了一个.
dTree.prototype.delegate=function(cid,cpid){}
其中的cid和cpid是自定义的ID和父ID.然后在具体调用的页面像下面这样写就可以了.
a.delegate=function(accountID,accountPID)
{
//你的代码
}
{
//你的代码
}
至于添加和删除节点就不是很难了,大家自己看代码就可以了:)


浙公网安备 33010602011771号