最近看到大家都练习写树，偶也学习学习写了一个，大家多多批评，我好进步，呵呵
不过我看了一些树的xml文档都是在xml中就已经有了树的结构，所以我写了一个xml文档不用分层，来生成树的，不过要给每个节点定义编号和父编号

写得有点糙，大家不要笑话，以后逐渐学习在改进

演示地址: http://www.lapuasi.com/javascript/xmltree

使用方法:
var tree = new xmlTree('tree'); //生成对象
tree.mode = 1; //设置初始模式，默认全部关闭。0全部关闭，1全部展开
tree.createTree(); //输出树

更新:
2005-12-25
　xml增加了target标签，可以定义连接打开位置
　修改了无连接节点点击跳回页面顶端的bug


Javascript代码:

/* JavaScript Document */ /* xmlTree v1.2 ================================= Infomation ---------------------- Author : Lapuasi E-Mail : lapuasi@gmail.com WebSite : http://www.lapuasi.com/javascript DateTime : 2005-12-25 Example ---------------------- var tree = new xmlTree('tree'); //生成对象 tree.mode = 1; //设置初始模式，默认全部关闭。0全部关闭，1全部展开 tree.createTree(); //输出树 for Internet Explorer, Mozilla Firefox */ function xmlTree(name) { this.name = name; //实例名称 this.xmlFile = 'xmltree.xml'; //默认xml文件 this.iconPath = 'images/' //默认图标路径 this.iconFolder = 'tree_icon_folder.gif'; //默认文件夹图标 this.iconFile = 'tree_icon_file.gif'; //默认文件图标 this.iconOpen = 'tree_arrow_open.gif'; //默认箭头展开图标 this.iconOver = 'tree_arrow_over.gif'; //默认箭头活动图标 this.iconClose = 'tree_arrow_close.gif'; //默认箭头关闭图标 this.mode = 0; //初始模式，默认全部关闭。0全部关闭，1全部展开 this.html = ''; //最终输出html代码 this.prevTip = null; //上一次被显示的tip的时间编号 (内部使用) this.prevSelected = null; //上一次被选中的节点的自动编号 (内部使用) } xmlTree.prototype.createXMLDOM = function() { //生成XMLDOM对象 var xmldom; if (window.ActiveXObject){ var xmldom = new ActiveXObject("Microsoft.XMLDOM"); } else { if (document.implementation && document.implementation.createDocument) { var xmldom = document.implementation.createDocument("","doc",null); } } xmldom.async = false; xmldom.resolveExternals = false; xmldom.validateOnParse = false; xmldom.preserveWhiteSpace = true; return xmldom; } xmlTree.prototype.createTree = function() { //生成并打印 var xmldom = this.createXMLDOM(); document.write('<div id="tree"><\/div>'); // 树所用层 document.write('<div id="treeTip"><\/div>'); //提示所用层 document.getElementById('treeTip').style.visibility = 'visible'; document.getElementById('treeTip').style.display = 'none'; if (xmldom.load(this.xmlFile)) { this.createNodes(xmldom); } else { this.html = 'Load XML Error'; } document.getElementById('tree').innerHTML = this.html; return; } xmlTree.prototype.getFirstChildData = function(obj, name) { //取得指定名称节点的第一个子节点的数据 var result = ''; if (typeof(obj) == 'object' && name != null && name != '') { var node = obj.getElementsByTagName(name); if (node != null && node.length > 0) { result = node[0].firstChild.data; } } return result; } xmlTree.prototype.checkChildNodes = function(obj, id) { //检测是否有分支 var result = false; var nodes = obj.getElementsByTagName('node'); if (nodes != null && nodes.length > 0) { //var pid; for (var i = 0; i < nodes.length; i++) { //pid = nodes[i].getAttribute('parentid'); if (nodes[i].getAttribute('parentid') == id) { result = true; break; } } } return result; } xmlTree.prototype.createNodes = function(obj, id) { //生成指定编号节点的树 if (typeof(id) == 'undefined') id = null; //如果没有id传入则为根节点 var nodes = obj.getElementsByTagName('node'); if (nodes != null && nodes.length > 0) { var modeClass, modeSrc, iconClass, iconSrc; var nid, npid, nname, nicon, nlink, ntarget, nexplain, hasChildNodes; //判断模式类型，并应用样式 modeClass = 'close'; modeSrc = this.iconPath + this.iconClose; if (this.mode == 1) { modeSrc = this.iconPath + this.iconOpen; modeClass = 'open'; } if (id == null) modeClass = 'open'; //若为根节点则显示 this.html += '<ul id="tree_' + id + '_c" class="' + modeClass + '">'; for (var i = 0; i < nodes.length; i++) { npid = nodes[i].getAttribute('parentid'); if (npid == id) { //初始化 modeClass = 'close'; iconClass = 'icon-file'; iconSrc = this.iconPath + this.iconFile; //取得节点编号并检测 nid = nodes[i].getAttribute('id'); this.html += '<li id="tree_' + nid + '"><span onclick="' + this.name + '.action(this,event);" onmouseover="' + this.name + '.action(this,event);" onmouseout="' + this.name + '.action(this,event);">'; //取得节点自定义图标 //判断是否含有子节点，并确定箭头和图标的图片及样式 nicon = this.getFirstChildData(nodes[i], 'icon'); hasChildNodes = this.checkChildNodes(obj, nid); if (hasChildNodes) { iconClass = ''; iconSrc = this.iconPath + this.iconFolder; this.html += '<img id="tree_' + nid + '_a" src="' + modeSrc + '" class="arrow" \/>'; //箭头 } if (nicon != '') iconSrc = nicon; this.html += '<img id="tree_' + nid + '_i" src="' + iconSrc + '" class="' + iconClass + '" \/>'; //图标 //取得节点连接 nlink = this.getFirstChildData(nodes[i], 'link'); if (nlink != '') { nlink = ' href="' + nlink + '"'; } else { nlink = ' href="javascript:;"'; } //取得节点目标 ntarget = this.getFirstChildData(nodes[i], 'target'); if (ntarget != '') { ntarget = ' target="' + ntarget + '"'; } //取得节点说明 nexplain = this.getFirstChildData(nodes[i], 'explain'); if (nexplain != '') { nexplain = ' onmouseover="' + this.name + '.treeTips(\'' + nexplain + '\');" onmouseout="' + this.name + '.treeTips();"' } //取得节点名称 nname = this.getFirstChildData(nodes[i], 'name'); this.html += '<a id="tree_' + nid + '_l" onclick="' + this.name + '.action(this,event);"' + nlink + ntarget + nexplain + '>' + nname + '<\/a><\/span>'; //obj.documentElement.removeChild(nodes[i]); if (hasChildNodes) this.createNodes(obj, nid); //迭代子节点 this.html += '<\/li>'; } } this.html += '<\/ul>'; } return; } xmlTree.prototype.action = function(obj, e) { //节点操作 e = e ? e : (window.event ? window.event : null); //获取操作类型 e = e.type; if (obj.tagName == 'A') { try { this.prevSelected.className = '';} catch(e) {} this.prevSelected = obj; obj.className = 'selected'; } if (obj.tagName == 'SPAN') { var arrow = obj.firstChild; //取得箭头对象 var borther = obj; while (borther.tagName != 'UL') { //取得分支对象 borther = borther.nextSibling; if (borther == null) break; } if (borther != null) { switch (e) { //检测操作类型并执行相应代码 case 'click': if (borther.className == 'open') { borther.className = 'close'; arrow.src = this.iconPath + this.iconClose; } else { borther.className = 'open'; arrow.src = this.iconPath + this.iconOpen; } break; case 'mouseover': if (arrow.tagName == 'IMG' && borther.className == 'close') { arrow.src = this.iconPath + this.iconOver; } break; case 'mouseout': if (arrow.tagName == 'IMG' && borther.className == 'close') { arrow.src = this.iconPath + this.iconClose; } break; } } } return; } xmlTree.prototype.treeTips = function(msg) { //提示栏 if (this.prevTip != null) clearTimeout(this.prevTip); var obj = document.getElementById('treeTip'); if (obj != null) { if (this.treeTips.arguments.length < 1) { // hide obj.style.display = 'none'; } else { // show obj.innerHTML = msg; this.prevTip = setTimeout('document.getElementById("treeTip").style.display = "block"',300); document.onmousemove = this.moveToMouseLoc; } } return; } xmlTree.prototype.moveToMouseLoc = function(e) { //移动到鼠标所在位置 var obj = document.getElementById('treeTip'); if (obj != null) { var offsetX = -10, offsetY = 20; var x = 0, y = 0; if (window.event) { x = event.x + document.body.scrollLeft; y = event.y + document.body.scrollTop; } else { x = e.pageX; y = e.pageY; } obj.style.left = x + offsetX + 'px'; obj.style.top = y + offsetY + 'px'; } return; }
 提示：您可以先修改部分代码再运行

xml 数据:

<?xml version="1.0" encoding="utf-8"?> <!-- CODE BY Lapuasi.com [2005-12-14] Explain: =================================================== node 为树的一个节点，具有以下属性和内容 属性 id: 编号，如果不唯一，只取第一个，其余被忽略 (必须, 可以是任意字符组合) parentid: 父编号，没有则为父节点 (可选, 可以是任意字符组合) 内容 name: 名称 (必须) link: 连接 (可选) target: 目标 (可选) icon: 图标 (可选) explain: 说明 (可选) --> <root> <node id="n1"> <name>我的电脑</name> <icon>images/tree_icon_computer.gif</icon> <explain>显示连接到此计算机的驱动器和硬件</explain> </node> <node id="2" parentid="n1"> <name>硬盘驱动器 (C:)</name> <icon>images/tree_icon_driver.gif</icon> </node> <node id="3"> <name>网上邻居</name> <icon>images/tree_icon_net.gif</icon> <explain>显示到网站，网络计算机和FTP站点的快捷方式</explain> </node> <node id="4" parentid="n1"> <name>硬盘驱动器 (D:)</name> <icon>images/tree_icon_driver.gif</icon> </node> <node id="5" parentid="2"> <name>Windows</name> </node> <node id="6" parentid="3"> <name>menu6</name> </node> <node id="7" parentid="3"> <name>menu7</name> </node> <node id="8" parentid="3"> <name>menu8</name> </node> <node id="9" parentid="7"> <name>menu9</name> </node> <node id="10"> <name>回收站</name> <icon>images/tree_icon_recycler.gif</icon> <explain>包含您已经删除的文件和文件夹</explain> </node> <node id="11" parentid="5"> <name>system32</name> </node> <node id="12" parentid="11"> <name>system.dll</name> <link>http://www.lapuasi.com</link> <target>_blank</target> </node> <node id="13" parentid="7"> <name>menu13</name> </node> <node id="14" parentid="n1"> <name>DVD 驱动器</name> <icon>images/tree_icon_cdrom.gif</icon> </node> </root>
 提示：您可以先修改部分代码再运行

漂亮漂亮～

这个xml我喜欢，这样的xml结构用数据库生成很容易，一个循环就搞定了，不需要嵌套，这个值得称赞，让这部分工作由客户端来作，减轻了不少服务端的负担

你的树在加载的时候最好有一些提示哦，就类似msdn那样，这样用户才知道目前的进展，不至于以为死机了

呵呵，因为没有用xmlhttp去读取，所以也没有放上loading的字样
再加上就好了

可惜的是mf的dom对象不支持xpath语句，要不会容易很多....

=_=' 没人看.... T_T

好厉害哦

强帖。顶
我现在用的是dtree。不是xml的，在分支多了以后感觉很慢。
好好研究一下这个xmltree。争取移植过来

8错。。我对xml不是很熟悉，，现在也静不下心来看代码。。：（

大家有什么意见和建议可以一起修改，实用是一方面，提高是一方面

和大家一起讨论进步才是最有意思的事情

很漂亮,喜欢这个样子的

讨论.
你的链接用的是"#" 会导致页面不是最顶时点完了回到最顶
这样如果树很长的话,在下面开合叶子,就会导致返回顶端,很郁闷

这是我以前做树的一点经验

楼上的朋友说的是，我也知道，不过a有自己的几种状态，省得用js来写，而且ie不支持css2，所以css2中的:hover等都没法用在别的标签上

做了一些改进，就是在没有link值得时候a标签不具有href属性，这样就不会返回页面顶端了

可是，如果去掉了href属性，在ie里面a就不再具有:hover,:active等特性了...mf完全正常

不知道fove朋友还有什么更好的办法

漂亮.!!!..以前一直是在服务器端处理ParentNode的关系
从来没想到放到客户端去解释...
真的省服务器资源....我还在用微软那个TREE写递归....慢死...

解决一个问题的N种思路 总是很难取舍...

###酱紫拉

还可以按照ｃｓｄｎ的思路

就是需要哪级菜单就用xmlhttp去读取相应的xml文件，这样可以按照客户端需求来发送数据，节省不需要的部分。

不过这样xml文件就会不少，如果直接访问数据库读取目录内容，也会有大量的数据访问

反正各有各的特点，我觉得主要还是看具体需求

如上思路可以用一下xml

复制内容到剪贴板

代码:

<root>
  <node id="1">
    <name>aaa</name>
    <childxml>bbb.xml</childxml>
  </node>
</root>

呵呵，分批对数据库的访问和一次性大数据量的访问哪个更好呢

而且，分次读取，每次所需要的时间与一次读取全部比较起来，客户应该更倾向第一种呢，你再作另一个版本的吧：D

我觉得如果像csdn那样有很多级，很大一棵树，使用部分访问数据应该可以相应节省一些资源

如果只有较小一棵树，整棵树的数据量也就几k或者十几k，那么还不如一次读完

而且如果根据需要读取相应节点的话就应该直接访问数据库，反而没有必要生成一个很大的xml文档或着无数个小xml文档，这样我倒觉得数据库的效率会更高些

复制内容到剪贴板

代码:

//obj.documentElement.removeChild(nodes[i]);
if (hasChildNodes) this.createNodes(obj, nid); //迭代子节点

还有个疑问。就是我在程序里使用迭代子节点，效率不算很高，所以我打算在dom对象中把已显示节点删除

复制内容到剪贴板

代码:

obj.documentElement.removeChild(nodes[i]);

可是加上这句在mf里循环就会由bug，会有一些节点被漏掉，不知道为什么，我检查每个循环的过程，在根节点上的循环出现了问题，可在ie上就不会有问题，不知道是怎么回事......

如果楼主能给这个xmltree加上cookie功能的话，还有能够支持双击事件。我想更棒了

如果楼主能给这个xmltree加上cookie功能的话，还有能够支持双击事件。我想更棒了

lianfang在上个帖子中说

引用:

如果楼主能给这个xmltree加上cookie功能的话，还有能够支持双击事件。我想更棒了

我以前倒是有着打算，不过没想出来双击事件用来做什么，页面里好像都习惯单击哦

而且windows的资源管理器也是单击操作的，呵呵

另外，楼主，好像那个xml文件的node id不支持字符吧。只能是数字。支持字符就好了

lapuasi在上个帖子中说

引用:

lianfang在上个帖子中说
[quote] 如果楼主能给这个xmltree加上cookie功能的话，还有能够支持双击事件。我想更棒了

我以前倒是有着打算，不过没想出来双击事件用来做什么，页面里好像都习惯单击哦

而且windows的资源管理器也是单击操作的，呵呵 [/quote]

有个很具体的例子。把这个tree移植到人员选择应用中，双击就直接到已选择列表中去了。

lianfang在上个帖子中说

引用:

另外，楼主，好像那个xml文件的node id不支持字符吧。只能是数字。支持字符就好了

嗯，这个倒是哦！
我改改

作的很漂亮，楼主加油
如果在循环里执行obj.documentElement.removeChild(nodes[i]);   删除一个后，nodes变化了，你的i可能已经不准确了，从后往前删就行，后面的child删除不会影响前面节点的i
我的树节点xml里<xmlurl>就是该节点展开时子节点xml数据的url，子节点可能是一层节点也可能是n个子树和n个子节点，全看<xmlurl>里的aspx怎么运行，今天已经加了两个aspx生成xml了，现在只要节点的<xmlurl>里有url，点击展开时从aspx生成的xml里产生节点，节点比较少就一次性生成，节点多访问量大的话每次aspx里只生成一层节点的xml，还有些xml是用aspx一次性创建在xml里的，因为这个项目里大约4000多人，人员都是从AD里读的，一部分xml做成静态的稍快一些，下面是其中一个xml节点，变动时覆盖静态xml  
<newdataset>
<Table>
    <id>x314</id>
    <name>统计处</name>
    <Type>3</Type>
    <ParentID>x21</ParentID>
    <RealID>14</RealID>
   <xmlurl>../xml/createPeopleXml.aspx?&dept=14</xmlurl>
  </Table>
  <Table>
    <id>x319</id>
    <name>yangchao</name>
    <Type>3</Type>
    <ParentID>x21</ParentID>
    <RealID>19</RealID>
  </Table>
..</newdataset>
这是.net数据集对象默认的xml格式，楼主也是用的这种循环格式，不关心节点的层次关系，只要有parentid就行，还有一种xml格式节点是嵌套的，树中节点的父子关系和xml数据里的父子关系是一样的，这种xml比较好生成树，因为节点的一些属性不需要再计算（hasChild,isLast等直接通过xml里节点的相关属性就可以得到），.net里的treeview就是这种嵌套格式，如果将来可能要考虑不同的xml格式生成树，所以我想做了一个读取不同xml数据的配置文件，怎么读取xml里的数据是通过设置配置文件获得，代码尽量不需要改动
<loadXmlConfig>
    <node path="//newdataset/Table" loadmode="for">   节点在xml里的路径以及xml格式：循环、嵌套     loadmode=for表示第二种（循环）
    <id type="node" path="id"/>       表示id数据存放的位置,type="attribute"表示id存放在节点的属性里，type="node"表示id存放在节点下面名为"id"的子节点（像dataset里那样）
   <parentid type="node" path="ParentID">
   ...
楼主的xml读取配置文件:
<loadXmlConfig >
  <node path="//root/node" loadmode="for">   代码就会用selectNodes("//root/node")得到所有子节点
  <id type="attribute" path="id">   此时path是属性名
  <parentid type="attribute" path="parentid">
  <name type="node" path="name">    name在标签为name的子节点里
如果是另一种嵌套的xml:
<nodes>
   <node id="1" name="我的电脑" icon="images/tree_icon_computer.gif" explain="到此计算机的驱动器和硬件"/>
  <node id="2" parentid="1" name="硬盘驱动器" icon="images/tree_icon_driver.gif"/>
配置文件如下：
<loadXmlConfig >
  <node path="//nodes/node" loadmode="递归">   用递归函数
  <id type="attribute" path="id">   此时path是属性名
  <parentid type="attribute" path="parentid">
  <name type="attribute" path="name">    name也是一个属性
  ..</node>
</loadXmlConfig>
大家觉得可行吗，到时候一个树可能是各个系统生成的xml拼起来的，即使xml格式不同，只要经过配置，用一个方法就可以显示出来，这个方法会去读xml配置模板的，可能还有两个函数，一个是用来循环的，一个是用来递归的
看到楼主的xml，很好看，所以想到可能会换不同格式的xml，不过考虑到短期都用.net的dataset对象，改变xml格式就要自己打出这些xml字符了，所以先不考虑了，以上都是假想

楼上兄弟想法不错，xml模板，程序会更通用

不过也许如下结构更容易获得元素的名字

复制内容到剪贴板

代码:

<config>
　<element>
　　<name>id</name>
　　<type>attribute</type>
　</element>
　<element>
　　<name>parentid</name>
　　<type>attribute</type>
　</element>
　<element>
　　<name>name</name>
　　<type>node</type>
　</element>
　<element>
　　<name>icon</name>
　　<type>node</type>
　</element>
　<element>
　　<name>link</name>
　　<type>node</type>
　</element>
　<element>
　　<name>explain</name>
　　<type>node</type>
　</element>
</config>

lapuasi在上个帖子中说

引用:

楼上的朋友说的是，我也知道，不过a有自己的几种状态，省得用js来写，而且ie不支持css2，所以css2中的:hover等都没法用在别的标签上

做了一些改进，就是在没有link值得时候a标签不具有href属性，这样就不会返回页面顶端了

可是，如果去掉了href属性，在ie里面a就不再具有:hover,:active等特性了...mf完全正常

不知道fove朋友还有什么更好的办法

我就是直接用js给他加上onmouseover和onmouseout的事件,其动作是将该a的className替换,两种css代表hover和link的两种外观

还可以写a href="javascript:函数()"  不知道兼容性如何

提供一下dtree的属性
id：当前结点id
parentid：父结点id
name：结点名称
link：结点的Url
target：结点打开的目标（这个属性xmltree没有）
icon：结点图标
iconopen：展开节点后的图标（这个属性xmltree没有）

我觉得有以上属性。这个xmltree就更完美了

Fove在上个帖子中说

引用:

我就是直接用js给他加上onmouseover和onmouseout的事件,其动作是将该a的className替换,两种css代表hover和link的两种外观

还可以写a href="javascript:函数()"  不知道兼容性如何

这样是可以的。当初选择a的原因就是它具有多种状态，在不用写js的情况下就可以实现动态的效果，呵呵，所以应该算偷懒了

lianfang在上个帖子中说

引用:

提供一下dtree的属性
id：当前结点id
parentid：父结点id
name：结点名称
link：结点的Url
target：结点打开的目标（这个属性xmltree没有）
icon：结点图标
iconopen：展开节点后的图标（这个属性xmltree没有）

我觉得有以上属性。这个xmltree就更完美了

嗯嗯，的确少了些有用的属性。当初写得比较糙，所以也没想那么多，回头加上