HTML网页中树型结构显示的脚本实现

资源管理器的左边是一个树状结构，可以方便的选择文件夹和文件，工作中需要这样一个东西，从网上下载了一个可以用，但显示速度慢，所以自己写了一个，给大家共享，欢迎修改。[e-mail]   
2007/05/16
今天发布新版本，
主要更新：跨浏览器显示，精美的文档。
请大家直接下载xyTreeV4.0.zip，原先那个不用了。
并请多提宝贵意见！

2007/06/20

今天发布新版本，
主要更新：动态加载节点，命名空间引入，自定义图片，一堆扩展方法……
请大家直接下载xyTreeV4.1.zip，原先那两个都不用了。
并请多提宝贵意见！
－－ 倾力制作 年度巨献 －－

评论

32 楼 jamking 2007-06-27  

非常好！
我正需要，拿去用了，拜！

31 楼 xieye 2007-06-27  

请管理员删除掉我的帖子的第一个附件xyTree.zip。
我自己怎么也删除不掉
xieye

30 楼 庄严 2007-06-24  

看过示例了，太爽了！！日后研究代码！

29 楼 庄严 2007-06-24  

下来看看，昨天我刚用了DTREE

28 楼 xieye 2007-06-23  

大家对更新过的版本难道一点看法都没有吗？想听批评都这么难？

27 楼 tzbzll 2007-06-22  

支持楼主，继续努力！

26 楼 xieye 2007-06-22  

怎么没人关注……
第一个文件，过时了，但怎么也删不掉，不知为什么
xieye

25 楼 xieye 2007-06-21  

一棵优秀的国产树！强烈推荐！！！

24 楼 xieye 2007-06-19  

最迟7天之内会推出新版本，包括楼上提出的动态添加（不是删除！）节点。方法名暂定为nodeA.addDynamic(nodeB)，表示这时树已经加载并显示了,并且nodeA已经挂在树上了（必须，但不一定正在显示），执行完方法后nodeB会立刻显示出来。

另，新版本添加了命名空间，
形如：
//定义树使用了命名空间
var treeXiaqu = new xyTree.DivTree('中华人民共和国');
//这5个变量是临时使用的，名字无所谓
var node1,node2,node3,node4,node5;

//定义节点也要使用命名空间，使用深度遍历方法逐个定义
node1 = new xyTree.Node('北京市');
//id属性是自己定义的，不定义也行
node1.id = 110000;
treeXiaqu.add(node1);

node2 = new xyTree.Node('市辖区');
node2.id = 110100;
node1.add(node2);

定义树对象和节点对象的时候要加前缀了。
还有更多功能，更多惊喜，敬请期待！！！

xieye
2007/06/19

23 楼 dy.f 2007-06-18  

xieye 写道

（2）第二种方法，即时读取，这样就必须把这个文件的内容全部包含在jsp页面里（可以使用servlet），具体的做法，去掉HTML页面或jsp页面内的加载这句话<script src="data_xingzhengquhua.js"></script>
，然后换上<% ...... %>,里面是字符串，形如
<script>var treeXiaqu = new DivTree('中华人民共和国');
var node1,node2,node3,node4,node5;

node1 = new Node('北京市');
node1.id = 110000;
treeXiaqu.add(node1);

node2 = new Node('市辖区');
node2.id = 110100;
node1.add(node2);

node3 = new Node('东城区');
node3.id = 110101;
node2.add(node3);
..................
<script>
这就行了。

请问这里能不能实现动态加载树节点？比如我从数据库查询，返回‘中华人民共和国’子孩子列表list,然后把这个list动态加载到上面，然后如果再点击‘北京市’，就返回北京市的子孩子列表，也加载上面去...这样下去。
不知道可不可实现？

22 楼 shandongxiaosu 2007-06-18  

ding

21 楼 SoftHt 2007-06-15  

很不错，感谢分享，谢谢

20 楼 xieye 2007-06-15  

bug修正:
DivTree.js
第326行原先是
this.div.firstChild.firstChild.src = TreeConfigNormal.rootIcon;
改成:
this.div.firstChild.firstChild.src = TreeConfig.rootIcon;

第331行原先是
this.div.firstChild.firstChild.src = TreeConfigNormal.openRootIcon;
改成:
this.div.firstChild.firstChild.src = TreeConfig.openRootIcon;

这是我的输入错误,抱歉!
xieye 2007/06/15

19 楼 libojacky 2007-06-14  

  不错 学习

18 楼 xieye 2007-06-04  

回楼上：
拖放节点，难度不是一般的大，代码数量估计要翻倍上涨，当然，难度大是指我自己，不包括高手，这个树的立意就是要简单！也无需别的库的支撑
xieye 2007、06、02

17 楼 broncho 2007-06-02  

感觉很好，有点遗憾，不能拖放节点，希望能够增加这个功能

16 楼 xieye 2007-05-25  

感谢googleme的义务测试！不过，我该怎么感谢好呢？
把代码再改一遍？我仿佛已经看到了重重困难摆在前面，我决定知难而退。
主要是我估计网景的用户不会太多。

我下了netscape7.0
然后，在该浏览器中我随便试了一句：
status = 11;
这句话并没有起作用，
然后，我改成
window.status = 11;
这时状态栏出现11字样，我很气愤，因为对象的作用域链顶部应该就是window，请。
这是第二个理由。第三个理由是我太懒了。虽然上班也没事。

15 楼 googleme 2007-05-24  

lz厉害，呵呵
不过还是不支持netscape ^_^

14 楼 xieye 2007-05-24  

好啊，可以把代码拿出来大家一起切磋一下，关于是否能动态加载树节点的问题主要取决于需求，我这儿的业务上暂时没这样的需求，所以就不管了。

动态增减节点要考虑的问题较多：是否增减节点的同时在界面上显示，怎样获得待增加节点的父节点（这样才好插入），要不要处理异常，天哪，不敢想象……

如果要想动态增减节点，可直接使用javaeye上别的帖子上介绍的老外写的各种树。（我的外语很逊，而且也没有很早上这个网站，否则我可能直接用别人的树了）

我写的代码也可有不少优化没做，如可以使用继承的手法使代码更加精简，可是我的水平暂时还差点，唯一的优点是只在点击加号时才展开div元素

我个人一直不太欣赏服务端的jsp的标签用法（纯个人看法，而且我也不会用……），我总是要看到代码才放心，毕竟在浏览器显示东西如不用插件还是要靠javascript。

13 楼 lumi 2007-05-22  

我的树在数据加载上稍微灵活些，但是代码肯定写的没你好！

我是用ajax动态加载数据的，要什么就加载什么！

早知道网络上有，就不要重复发明轮子了！