带选择框的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多个节点 ) 目前没想到好的解决方法。(全选的话无论如何也需要初始化一次吧)


[img]http://dl.iteye.com/upload/attachment/155047/0b317dc3-229c-38b7-9cce-ae058599f7f3.jpg[/img]


PS:那个第一次checked全选的时候会有延迟的问题想到解决方法了。
见 [url]http://www.iteye.com/topic/487771[/url]
var myTree = null; function CreateTree() { myTree = new ECOTree('myTree','myTreeContainer'); myTree.config.colorStyle = ECOTree.CS_LEVEL; myTree.config.nodeFill = ECOTree.NF_FLAT; myTree.config.selectMode = ECOTree.SL_NONE; //是否允许给节点加链接,是否允许给节点加图片 myTree.config.useTarget = false; myTree.config.useImg = true;   //设置节点的大小和间隔 myTree.config.defaultNodeWidth = 95; myTree.config.defaultNodeHeight = 140; myTree.config.iSubtreeSeparation = 50; myTree.config.iSiblingSeparation = 15; myTree.config.iLevelSeparation = 30; //此处通过从数据库或其它地方读取节点信息,生成添加节点的代码 //参数前三位是必须的; //第一位是本节点id,第二位是父节点id、根节点的父节点为-1,第三位为节点文本; //第四位为节点上显示的图片/照片、图片放到img下并在数据库中记录名称即可,未设参数则取默认图片; //第五位为超链接、最好是访问统一程序传入本节点id; //第六、七位为节点的个性化宽、高。 myTree.add('01',-1,'总裁','./img/0.jpg','http://www.jq-school.com'); myTree.add('02','01','技术副总裁','./img/1.jpg'); myTree.add('03','01','总裁助理','./img/2.jpg','http://www.jq-school.com',95,130); myTree.add('04','01','分公司','./img/3.jpg','http://www.jq-school.com',95,130); myTree.add('0201','02','技术经理','./img/4.jpg','http://www.jq-school.com',95,130); myTree.add('0202','02','技术员','./img/5.jpg','http://www.jq-school.com',95,130); myTree.add('0301','03','秘书','./img/5.jpg','http://www.jq-school.com',95,130); myTree.add('0302','03','助理','./img/6.jpg','http://www.jq-school.com',95,130); myTree.add('0401','04','总经理','./img/6.jpg','http://www.jq-school.com',95,130); myTree.add('0402','04','财务','./img/7.jpg','http://www.jq-school.com',95,130); myTree.UpdateTree(); } 包含有例子和源码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值