基于JS的树形导航的实现_js树形数据导航步骤-CSDN博客

本文链接：https://blog.csdn.net/dannywj1371/article/details/6288860

网上找了个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.