您的位置：首页 > Web前端 > JavaScript

基于JS的树形导航的实现

2011-03-30 15:11 309 查看
网上找了个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);

方法中的参数这里有必要说一下

Parameters

NameTypeDescription
idNumberUnique identity number.
pidNumberNumber refering to the parent node. The value for the root node
has to be -1.
nameStringText label for the node.
urlStringUrl for the node.
titleStringTitle for the node.
targetStringTarget for the node.
iconStringImage file to use as the icon. Uses default
if not specified.
iconOpenStringImage file to use as the open icon. Uses
default if not specified
openBooleanIs the node open.
Example
mytree.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/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航