dtree的效果图如下: 页面代码以及CSS样式如下: 页面以及css代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DTree</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"><!-- .tree { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; padding: 10px; white-space: nowrap; } .tree img { border:0px; height: 18px; vertical-align: text-bottom; } .tree a { color: #000; text-decoration: none; } .tree a:hover { color: #345373; } --></style><style type="text/css" mce_bogus="1"> .tree { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; padding: 10px; white-space: nowrap; } .tree img { border:0px; height: 18px; vertical-align: text-bottom; } .tree a { color: #000; text-decoration: none; } .tree a:hover { color: #345373; } </style> <script type="text/javascript" src="tree.js" mce_src="tree.js"></:script> <script type="text/javascript"><!-- var Tree = new Array; /*设置自己需要的树形结构 节点ID | 父节点ID | 节点显示名 | 节点链接路径 nodeId | parentNodeId | nodeName | nodeUrl */ Tree[0] = "1|0|搜索引擎|#"; Tree[1] = "2|1|谷歌搜索|http://www.google.cn"; Tree[2] = "3|1|百度搜索|http://www.baidu.com"; Tree[3] = "4|0|导航网站|#"; Tree[4] = "5|4|百度导航|http://www.hao123.com"; Tree[5] = "6|4|谷歌导航|http://www.265.com"; Tree[6] = "7|4|网址导航|http://www.2345.com"; // --></script> </head> <body> <div class="tree"> <script type="text/javascript"><!-- createTree(Tree); // --></script> </div> </body> </html> 需要导入js文件 tree.js;tree.js内部代码如下: // Arrays for nodes and icons var nodes = new Array();; var openNodes = new Array(); var icons = new Array(6); // Loads all icons that are used in the tree //设置tree上的图标 function preloadIcons() { //设置加减号的图片 icons[0] = new Image();//底部展开 icons[0].src = "http://hi.csdn.net/attachment/201003/30/3766949_12699297386EVd.gif"; icons[1] = new Image();//中间展开 icons[1].src = "http://hi.csdn.net/attachment/201003/30/3766949_1269929738R8PX.gif"; icons[2] = new Image();//中间收起 icons[2].src = "http://hi.csdn.net/attachment/201003/30/3766949_12699297380ze1.gif"; icons[3] = new Image();//底部收起 icons[3].src = "http://hi.csdn.net/attachment/201003/30/3766949_1269929738FfMY.gif"; //设置节点前的小图标 icons[4] = new Image(); icons[4].src = "http://hi.csdn.net/attachment/201003/30/3766949_12699297385U57.gif"; icons[5] = new Image(); icons[5].src = "http://hi.csdn.net/attachment/201003/30/3766949_1269929739sgvS.gif"; icons[6] = new Image(); icons[6].src = "http://hi.csdn.net/attachment/201003/30/3766949_1269929739IOgA.gif"; //设置顶级目录的图标 icons[7] = new Image(); icons[7].src = "http://hi.csdn.net/attachment/201003/30/3766949_1269930080AHzi.gif"; //设置线的图片 icons[8] = new Image();//空白 icons[8].src = "http://hi.csdn.net/attachment/201003/30/3766949_1269930080kFBk.gif"; icons[9] = new Image();//中间线(无子节点) icons[9].src = "http://hi.csdn.net/attachment/201003/30/3766949_1269930394CoZH.gif"; icons[10] = new Image();//底部线(无子节点) icons[10].src = "http://hi.csdn.net/attachment/201003/30/3766949_12699303959zsZ.gif"; icons[11] = new Image();//竖线(无子节点) icons[11].src = "http://hi.csdn.net/attachment/201003/30/3766949_1269930595GoSh.gif"; } // Create the tree function createTree(arrName, startNode, openNode) { nodes = arrName; if (nodes.length > 0) { preloadIcons(); if (startNode == null) startNode = 0; if (openNode != 0 || openNode != null) setOpenNodes(openNode); if (startNode !=0) { var nodeValues = nodes[getArrayId(startNode)].split("|"); document.write("<a href="/" mce_href="/""" + nodeValues[3] + "/" οnmοuseοver=/"window.status='" + nodeValues[2] + "';return true;/" οnmοuseοut=/"window.status=' ';return true;/"><img src="/" mce_src="/"""+icons[5].src +"/" align=/"absbottom/" alt=/"/" />" + nodeValues[2] + "</a><br />"); } else document.write("<img src="/" mce_src="/"""+icons[7].src+"/" align=/"absbottom/" alt=/"/" />Website<br />"); var recursedNodes = new Array(); addNode(startNode, recursedNodes); } } // Returns the position of a node in the array function getArrayId(node) { for (i=0; i<nodes.length; i++) { var nodeValues = nodes[i].split("|"); if (nodeValues[0]==node) return i; } } // Puts in array nodes that will be open function setOpenNodes(openNode) { for (i=0; i<nodes.length; i++) { var nodeValues = nodes[i].split("|"); if (nodeValues[0]==openNode) { openNodes.push(nodeValues[0]); setOpenNodes(nodeValues[1]); } } } // Checks if a node is open function isNodeOpen(node) { for (i=0; i<openNodes.length; i++) if (openNodes[i]==node) return true; return false; } // Checks if a node has any children function hasChildNode(parentNode) { for (i=0; i< nodes.length; i++) { var nodeValues = nodes[i].split("|"); if (nodeValues[1] == parentNode) return true; } return false; } // Checks if a node is the last sibling function lastSibling (node, parentNode) { var lastChild = 0; for (i=0; i< nodes.length; i++) { var nodeValues = nodes[i].split("|"); if (nodeValues[1] == parentNode) lastChild = nodeValues[0]; } if (lastChild==node) return true; return false; } // Adds a new node to the tree function addNode(parentNode, recursedNodes) { for (var i = 0; i < nodes.length; i++) { var nodeValues = nodes[i].split("|"); if (nodeValues[1] == parentNode) { var ls = lastSibling(nodeValues[0], nodeValues[1]); var hcn = hasChildNode(nodeValues[0]); var ino = isNodeOpen(nodeValues[0]); // Write out line & empty icons for (g=0; g<recursedNodes.length; g++) { if (recursedNodes[g] == 1) document.write("<img src="/" mce_src="/"""+icons[11].src+"/" align=/"absbottom/" alt=/"/" />"); else document.write("<img src="/" mce_src="/"""+icons[8].src+"/" align=/"absbottom/" alt=/"/" />"); } // put in array line & empty icons if (ls) recursedNodes.push(0); else recursedNodes.push(1); // Write out join icons if (hcn) { if (ls) { document.write("<a href="/" mce_href="/""javascript: oc(" + nodeValues[0] + ", 1);/"><img id=/"join" + nodeValues[0] + "/" src="/" mce_src="/"""); if (ino) document.write(""+icons[3].src+"/" align=/"absbottom/" alt=/"Open/Close node/" /></a>"); else document.write(""+icons[0].src+"/" align=/"absbottom/" alt=/"Open/Close node/" /></a>"); } else { document.write("<a href="/" mce_href="/""javascript: oc(" + nodeValues[0] + ", 0);/"><img id=/"join" + nodeValues[0] + "/" src="/" mce_src="/"""); if (ino) document.write(""+icon[0].src+"/" align=/"absbottom/" alt=/"Open/Close node/" /></a>"); else document.write(""+icons[1].src+"/" align=/"absbottom/" alt=/"Open/Close node/" /></a>"); } } else { if (ls) document.write("<img src="/" mce_src="/"""+icons[10].src+"/" align=/"absbottom/" alt=/"/" />"); else document.write("<img src="/" mce_src="/"""+icons[9].src+"/" align=/"absbottom/" alt=/"/" />"); } // Start link document.write("<a href="/" mce_href="/""" + nodeValues[3] + "/" οnmοuseοver=/"window.status='" + nodeValues[2] + "';return true;/" οnmοuseοut=/"window.status=' ';return true;/">"); // Write out folder & page icons if (hcn) { if (ino) document.write("<img id=/"icon" + nodeValues[0] + "/" src="/" mce_src="/"""+icons[5].src+"/" align=/"absbottom/" alt=/"Folder/" />"); else document.write("<img id=/"icon" + nodeValues[0] + "/" src="/" mce_src="/"""+icons[4].src+"/" align=/"absbottom/" alt=/"Folder/" />"); } else document.write("<img id=/"icon" + nodeValues[0] + "/" src="/" mce_src="/"""+icons[6].src+"/" align=/"absbottom/" alt=/"Page/" />"); // Write out node name document.write(nodeValues[2]); // End link document.write("</a><br />"); // If node has children write out divs and go deeper if (hcn) { document.write("<div id=/"div" + nodeValues[0] + "/""); if (!ino) document.write(" style="/" mce_style="/""display: none;/""); document.write(">"); addNode(nodeValues[0], recursedNodes); document.write("</div>"); } // remove last line or empty icon recursedNodes.pop(); } } } // Opens or closes a node function oc(node, bottom) { var theDiv = document.getElementById("div" + node); var theJoin = document.getElementById("join" + node); var theIcon = document.getElementById("icon" + node); if (theDiv.style.display == 'none') { if (bottom==1) theJoin.src = icons[3].src; else theJoin.src = icons[2].src; theIcon.src = icons[5].src; theDiv.style.display = ''; } else { if (bottom==1) theJoin.src = icons[0].src; else theJoin.src = icons[1].src; theIcon.src = icons[4].src; theDiv.style.display = 'none'; } } // Push and pop not implemented in IE if(!Array.prototype.push) { function array_push() { for(var i=0;i<arguments.length;i++) this[this.length]=arguments[i]; return this.length; } Array.prototype.push = array_push; } if(!Array.prototype.pop) { function array_pop(){ lastElement = this[this.length-1]; this.length = Math.max(this.length-1,0); return lastElement; } Array.prototype.pop = array_pop; }