带选择框的JS树控件

前阵子自己写了个带选择框的tree控件，虽然还有一些bug没有修改（动态添加节点），但是感觉加载速度还可以。

子节点检索的方法参考了MzTree，测试了一下发现用正则去查找子节点的确比循环快了不少。

节点有三种状态，选中，未选中，未完全选中。


虽然引了一个jquery.js 但其实jquery只是用来在离开页面的时候把tree的变量delete一下（如果不delete一下 IE内存可能会越用越大）


使用方法：
  var otree = new OTree({
   panel  : document.body,   //Tree所在容器
   data  : chinaAreas         //tree所需数据 JSON格式 数据见china.js
  });
  otree.paint();  //绘制树



节点数大于1000的情况，如果开始就直接选中根节点，会卡大概5-10秒，因为节点太多了，全部选中需要初始化一次( 这个Tree有3000多个节点 ) 目前没想到好的解决方法。(全选的话无论如何也需要初始化一次吧)









PS:那个第一次checked全选的时候会有延迟的问题想到解决方法了。
见 http://www.iteye.com/topic/487771

评论

9 楼 Relucent 2009-10-15  

ydsakyclguozi 写道

全部加载的方式不好，耗资源啊，还是分级展开的好

其实是因为使用分级展开的方式，不知道Checkbox怎么处理。


另外，那个第一次checked全选的时候会有延迟的问题想到解决方法了。

见 http://www.iteye.com/topic/487771

8 楼 ydsakyclguozi 2009-10-14  

全部加载的方式不好，耗资源啊，还是分级展开的好

7 楼 Relucent 2009-10-14  

asialee 写道

能支持子节点动态加载吗，就是初始化的时候子节点都没有，当点击的时候会加载。

子节点动态加载目前没实现，但是有个appendNode方法可以自己加节点。




其实我现在研究怎么做才能让第一次checked全选的时候不卡。
(根节点checked打对勾)

目前想到的方法是不传递数组 直接传递一个树结构json，那么就不用解析了。而且以后动态加载也方便。

6 楼 asialee 2009-10-14  

我前一阵子写了一个，也有点bug

5 楼 asialee 2009-10-14  

能支持子节点动态加载吗，就是初始化的时候子节点都没有，当点击的时候会加载。

4 楼 whaosoft 2009-10-14  

不过 是不是所有浏览器都能用呢 不过貌似不错

3 楼 cwx714 2009-10-12  

不错！可以改写成一个jQuery插件啊！

2 楼 llfzy 2009-10-12  

<p>不错，收藏了！以前我还一直在找这方面的控件也！</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><a href="http://s.click.taobao.com/t_1?i=qz78fN%2Bpk8BTuQ%3D%3D&amp;p=mm_14292671_0_0&amp;n=11"><br>入门单反新王者 佳能高清500D套机（含18-55IS镜头）</a><br><a href="http://s.click.taobao.com/t_1?i=qX1fEUekOgm0qg%3D%3D&amp;p=mm_14292671_0_0&amp;n=11">【国庆特价】台湾微米1200万高清摄像机HDVH20 D80 HD-D10升级版</a><br><a href="http://s.click.taobao.com/t_1?i=qvYi2aN5Z3nzeA%3D%3D&amp;p=mm_14292671_0_0&amp;n=11">◥◣全国联保 大陆行货◢◤索尼T900 &lt;高清视频&gt; 国庆促销300台</a><br><a href="http://s.click.taobao.com/t_1?i=qvezK1P3Kbqvog%3D%3D&amp;p=mm_14292671_0_0&amp;n=11">09年新款DDV-6800HD数码相机摄像带遥控MP3/MP4 升级1600万像素</a><br><a href="http://s.click.taobao.com/t_1?i=qvQus%2F2p41Lujg%3D%3D&amp;p=mm_14292671_0_0&amp;n=11">国庆促销 [酷拍] 高清防抖数码摄像机,1200万像素</a><br><a href="http://s.click.taobao.com/t_1?i=qXn%2BA9WaqYRvCg%3D%3D&amp;p=mm_14292671_0_0&amp;n=11">K800/K600姊妹机■特价！尼柯K99■500万像素 4倍变焦 摄像 扩展</a><br><a href="http://s.click.taobao.com/t_1?i=qXssJ92egGbuAg%3D%3D&amp;p=mm_14292671_0_0&amp;n=11">松下LX3GK 正品大陆行货★ 千万像素+24mm超广角 ★钻石信誉</a><br><a href="http://s.click.taobao.com/t_1?i=qXMWriRrolnhAw%3D%3D&amp;p=mm_14292671_0_0&amp;n=11">五一特价 DV-592(DV592)升级版1600万像素超大3.0屏数码摄像机</a><br><a href="http://s.click.taobao.com/t_1?i=of9UcXaRZj6i&amp;p=mm_14292671_0_0&amp;n=11">1200万像素3.0屏带MP3/4多功能数码摄象机 DV-568(DDV-V8)<br></a><a href="http://s.click.taobao.com/t_1?i=qXpboEyxxOA%2BPQ%3D%3D&amp;p=mm_14292671_0_0&amp;n=11">1200万数码相机/摄像 美柯隆数码相机 536/1288 支持4G</a><br><a href="http://s.click.taobao.com/t_1?i=qveyF7B3BMxljg%3D%3D&amp;p=mm_14292671_0_0&amp;n=11">微米HDV-H20高清数码摄像机 5倍光变 1200万相素 防抖功能+套餐</a></p>

1 楼 xiaoleizi 2009-10-12  

很不错的控件，谢谢分享