对带checkbox的dtree树复选操作的一点改进

最近做项目,要用到带checkbox的树,树的规模大概是300-400个节点,于是想到了dtree树,dtree树的特点就是应用起来简单,但是性能不行,特别是节点过多的情况,不过400个节点是没有问题的,过多就不要用dtree树(切记!切记!)

dtree树原来是不带checkbox的,于是在网上找了一段带有checkbox代码,测试(400个节点)发现如果是单选某个叶子节点,速度还可以,如果是选根节点,速度就不行了,查看代码发现单击某个checkbox函数dTree.prototype.cc=function(nodeId){.....},代码要循环所有的树节点找到该节点的父节点和所有的子节点,显然这个是性能差的原因.于是我想是到在第一次加载树节点的时候就找出所有子节点和父节点,触发点击checkbox的时候就不要去循环所有节点了,当然这在加载的时候要耗费不少时间,不过在点击checkbox的时候就快多了.以下是我对dtree树修改的三个地方.

/*修改了Node结构*/

 function Node(id, pid, name, url, title, target, icon, iconOpen, open) {

 .......

 this.chainstr=[];   //子节点位置 子节点可能有多个所以是数组
 this.pidpostion;//父节点位置

}

 

/*修改了加载节点方法,把新增父节点和子节点添加上去*/

dTree.prototype.addNode = function(pNode) {

.....

cn.pidpostion= pNode._ai;
              if(cn.pid==-1)
              {
                cn.pidpostion=-1;
              }
              pNode.chainstr[pNode.chainstr.length]=n;

......

}

 

/*修改了触发选择方法 原来网上是用循环所有树节点方法,这里使用直接找父节点和子节点*/

dTree.prototype.cc={....}

 

具体代码看上传文件

 

总结:

dtree树的特点就是应用起来简单,但是节点过多就不要用dtree树