基于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"></mce:script> </div> <div id="t"> </div> </form> </body> </html>

后台返回一个JSON JS遍历读取数据

关于那个JSTree，简介如下：

对于 tree.add(id,pid,name,url,title,target,icon,iconOpen,open); 方法中的参数这里有必要说一下

Parameters

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.

Examplemytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');

上面是引自 dtree api 中的描述
下面是翻译后的描述：

id ：节点自身的id

pid ：节点的父节点的id

name ：节点显示在页面上的名称

url ：节点的链接地址

title ：鼠标放在节点上所出现的提示信息

target ：节点链接所打开的目标frame（如框架目标mainFrame或是_blank,_self之类）

icon ：节点关闭时的显示图片的路径

iconOpen：节点打开时的显示图片的路径

open

：布尔型，节点是否打开（默认为false）

参考网站：

http://blog.sina.com.cn/s/blog_59d6717c0100ekm3.html

http://destroydrop.com/javascripts/tree/

秒客网

基于JS的树形导航的实现

相关文章