基于JS的树形导航的实现
网上找了个JS的树形导航，先要下载那个js包，然后放在项目中，才可以使用，做了一个小例子，留着备用。
页面文件要放在那个js包共同的上级文件夹中，否则会找不到图片。
示例代码：
前台：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="showTree.aspx.cs" Inherits="WebApplication_study.Tree.showTree" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <mce:script src="dtree.js" mce_src="dtree.js" type="text/javascript"></mce:script> <link href="TreeJS/dtree.css" mce_href="TreeJS/dtree.css" rel="stylesheet" type="text/css" /> <mce:script src="../Scripts/jquery-1.4.1.js" mce_src="Scripts/jquery-1.4.1.js" type="text/javascript"></mce:script> </head> <body> <form id="form1" runat="server"> <div class="dtree"> <p> <a href="javascript: d.openAll();" mce_href="javascript: d.openAll();">展开全部</a> | <a href="javascript: d.closeAll();" mce_href="javascript: d.closeAll();">收起全部</a></p> <mce:script type="text/javascript"><!-- d = new dTree('d');//必须声明为全局变量 $(function () { $.getJSON("TreeJson.ashx", "", function (json) { d.add(0, -1, 'My tree');//根节点要添加 for (var i in json) {//遍历JSON对象！！！！！！ { d.add(parseInt(json[i].ID), parseInt(json[i].PID), json[i].Name, 'http://www.baidu.com/'); //前两项参数要为整型 } } document.getElementById("t").innerHTML = d; }); }) // --></mce:script> </div> <div id="t"> </div> </form> </body> </html>
后台返回一个JSON JS遍历读取数据
关于那个JSTree，简介如下：
对于 tree.add(id,pid,name,url,title,target,icon,iconOpen,open); 方法中的参数这里有必要说一下
| Name | Type | Description |
| id | Number | Unique identity number. |
| pid | Number | Number refering to the parent node. The value for the root node has to be -1. |
| name | String | Text label for the node. |
| url | String | Url for the node. |
| title | String | Title for the node. |
| target | String | Target for the node. |
| icon | String | Image file to use as the icon. Uses default if not specified. |
| iconOpen | String | Image file to use as the open icon. Uses default if not specified |
| open | Boolean | Is the node open. |
Example
mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');
上面是引自 dtree api 中的描述
下面是翻译后的描述：
open