jQuery.TreeView插件实现树状导航（十三）
一：jQuery.TreeView插件简介
该插件的特点：
1、支持静态的树，即一次性将全部数据加载到客户端。
2、支持异步树，即一次只加载一级或若干级节点，子节点可以异步加载数据。
3、支持节点级联。
4、能够承载大数据量，并性能表现优异。
5、支持主流浏览器。
6、使用方便
官方网站：
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
二：jQuery.TreeView插件使用
Step 1:添加相关css及js的引用
<link rel="stylesheet" href="../jquery.treeview.css" />
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../lib/jquery.cookie.js" type="text/javascript"></script>
<script src="../jquery.treeview.js" type="text/javascript"></script>
Simple:
1.普通加载 页面文件.html
1.普通加载 页面文件.html
<ul id="navigation">
<li><a href="#aaa">Item 1</a>
<ul>
<li><a href="?1.0">Item 1.0</a>
<ul>
<li><a href="?1.0.0">Item 1.0.0</a></li>
</ul>
</li>
<li><a href="?1.1">Item 1.1</a></li>
</ul>
</li>
</ul>
JS代码
<script type="text/javascript">
$(document).ready(function() {
$("#navigation").treeview({
persist: "cookie",
collapsed: true,
unique: true
});
});
</script>
效果：
2.treeview的一些属性
Options说明：
1、animated
设置动画效果.
Eg:$(".selector").treeview({ animated: "fast" })
2、collapsed
Treeview节点是否收缩,true:收缩，false:展开
$(".selector").treeview({ collapsed: true })
3、control
TreeView显示的容器
$(".selector").treeview({ control: “#container” })
4、unique
设置是否某一时刻只展开一个节点，
true:只展开一个，false:可以同时展开其他节点。
$(".selector").treeview({ unique: true })
5、toggle
$(".selector").treeview({ toggle: function() { console.log(this + " has been toggled"); } })
6、persist
$(".selector").treeview({ persist: "location" })
8、add
var tree = $(".selector").treeview(); $(".button").click(function() { var newSublist = $("<li><span class='folder'>New Sublist</span><ul>" + "<li><span class='file'>Item1</span></li>" + "<li><span class='file'>Item2</span></li></ul></li>").appendTo(tree); tree.treeview({ add: newSublist }); });
2：添加一个节点 效果：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo2.aspx.cs" Inherits="treeview_MyDemo_Demo2" %>
<!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>
<link rel="stylesheet" href="../jquery.treeview.css" />
<link rel="stylesheet" href="screen.css" />
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../lib/jquery.cookie.js" type="text/javascript"></script>
<script src="../jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// second example
$("#browser").treeview();
$("#add").click(function() {
var branches = $("<li><span class='folder'>New Sublist</span><ul>" +
"<li><span class='file'>Item1</span></li>" +
"<li><span class='file'>Item2</span></li></ul></li>").appendTo("#browser");
$("#browser").treeview({
add: branches
});
branches = $("<li class='closed'><span class='folder'>New Sublist</span><ul><li><span class='file'>Item1</span></li><li><span class='file'>Item2</span></li></ul></li>").prependTo("#folder21");
$("#browser").treeview({
add: branches
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<h4>Sample 1 - default</h4>
<ul id="browser" class="filetree">
<li><span class="folder">Folder 1</span>
<ul>
<li><span class="file">Item 1.1</span></li>
</ul>
</li>
<li><span class="folder">Folder 2</span>
<ul>
<li><span class="folder">Subfolder 2.1</span>
<ul id="folder21">
<li><span class="file">File 2.1.1</span></li>
<li><span class="file">File 2.1.2</span></li>
</ul>
</li>
<li><span class="file">File 2.2</span></li>
</ul>
</li>
<li class="closed"><span class="folder">Folder 3 (closed at start)</span>
<ul>
<li><span class="file">File 3.1</span></li>
</ul>
</li>
<li><span class="file">File 4</span></li>
</ul>
<button id="add">Add!</button>
</form>
</body>
</html>
3.动画效果
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo3.aspx.cs" Inherits="treeview_jquery_treeview_MyDemo_Demo3" %>
<!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>
<link rel="stylesheet" href="../jquery.treeview.css" />
<link rel="stylesheet" href="screen.css" />
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../lib/jquery.cookie.js" type="text/javascript"></script>
<script src="../jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// third example
$("#red").treeview({
animated: "fast",
collapsed: true,
unique: true,
persist: "cookie",
toggle: function() {
alert("ok");
//window.console && console.log("%o was toggled", this);
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<h4>Sample 2 - fast animations, all branches collapsed at first, red theme, cookie-based persistance</h4>
<ul id="red" class="treeview-red">
<li><span>Item 1</span>
<ul>
<li><span>Item 1.0</span>
<ul>
<li><span>Item 1.0.0</span></li>
</ul>
</li>
<li><span>Item 1.1</span></li>
<li><span>Item 1.2</span>
<ul>
<li><span>Item 1.2.0</span>
<ul>
<li><span>Item 1.2.0.0</span></li>
<li><span>Item 1.2.0.1</span></li>
<li><span>Item 1.2.0.2</span></li>
</ul>
</li>
<li><span>Item 1.2.1</span>
<ul>
<li><span>Item 1.2.1.0</span></li>
</ul>
</li>
<li><span>Item 1.2.2</span>
<ul>
<li><span>Item 1.2.2.0</span></li>
<li><span>Item 1.2.2.1</span></li>
<li><span>Item 1.2.2.2</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><span>Item 2</span>
<ul>
<li><span>Item 2.0</span>
<ul>
<li><span>Item 2.0.0</span>
<ul>
<li><span>Item 2.0.0.0</span></li>
<li><span>Item 2.0.0.1</span></li>
</ul>
</li>
</ul>
</li>
<li><span>Item 2.1</span>
<ul>
<li><span>Item 2.1.0</span>
<ul>
<li><span>Item 2.1.0.0</span></li>
</ul>
</li>
<li><span>Item 2.1.1</span>
<ul>
<li><span>Item 2.1.1.0</span></li>
<li><span>Item 2.1.1.1</span></li>
<li><span>Item 2.1.1.2</span></li>
</ul>
</li>
<li><span>Item 2.1.2</span>
<ul>
<li><span>Item 2.1.2.0</span></li>
<li><span>Item 2.1.2.1</span></li>
<li><span>Item 2.1.2.2</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="open"><span>Item 3</span>
<ul>
<li class="open"><span>Item 3.0</span>
<ul>
<li><span>Item 3.0.0</span></li>
<li><span>Item 3.0.1</span>
<ul>
<li><span>Item 3.0.1.0</span></li>
<li><span>Item 3.0.1.1</span></li>
</ul>
</li>
<li><span>Item 3.0.2</span>
<ul>
<li><span>Item 3.0.2.0</span></li>
<li><span>Item 3.0.2.1</span></li>
<li><span>Item 3.0.2.2</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</form>
</body>
</html>
4.同时格式化两个树
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo4.aspx.cs" Inherits="treeview_jquery_treeview_MyDemo_Demo4" %>
<!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>
<link rel="stylesheet" href="../jquery.treeview.css" />
<link rel="stylesheet" href="screen.css" />
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../lib/jquery.cookie.js" type="text/javascript"></script>
<script src="../jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// fourth example
$("#black, #gray").treeview({
control: "#treecontrol",
persist: "cookie",
cookieId: "treeview-black"
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<h4>Sample 3 - two trees with one tree control, black and gray theme, cookie-based persistance</h4>
<div id="treecontrol">
<a title="Collapse the entire tree below" href="#"><img src="../images/minus.gif" /> Collapse All</a>
<a title="Expand the entire tree below" href="#"><img src="../images/plus.gif" /> Expand All</a>
<a title="Toggle the tree below, opening closed branches, closing open branches" href="#">Toggle All</a>
</div>
<ul id="black" class="treeview-black">
<li>Item 1</li>
<li>
<span>Item 2</span>
<ul>
<li>
<span>Item 2.1</span>
<ul>
<li>Item 2.1.1</li>
<li>Item 2.1.2</li>
</ul>
</li>
<li>Item 2.2</li>
<li class="closed">
<span>Item 2.3 (closed at start)</span>
<ul>
<li>Item 2.3.1</li>
<li>Item 2.3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul id="gray" class="treeview-gray">
<li>Item 1</li>
<li>
<span>Item 2</span>
<ul>
<li class="closed">
<span>Item 2.1 (closed at start)</span>
<ul>
<li>Item 2.1.1</li>
<li>Item 2.1.2</li>
</ul>
</li>
<li>Item 2.2.1</li>
<li>Item 2.2.2</li>
<li>Item 2.2.3</li>
<li>Item 2.2.4</li>
<li>Item 2.2.5</li>
<li>Item 2.2.6</li>
<li>Item 2.2.7</li>
<li>Item 2.2.8</li>
<li>
<span>Item 2.3</span>
<ul>
<li>Item 2.3.1</li>
<li>Item 2.3.2</li>
<li>Item 2.3.3</li>
<li>Item 2.3.4</li>
<li>Item 2.3.5</li>
<li>Item 2.3.6</li>
<li>Item 2.3.7</li>
<li>Item 2.3.8</li>
<li>Item 2.3.9</li>
</ul>
</li>
<li>
<span>Item 2.4</span>
<ul>
<li>Item 2.4.1</li>
<li>Item 2.4.2</li>
<li>Item 2.4.3</li>
<li>Item 2.4.4</li>
<li>Item 2.4.5</li>
<li>Item 2.4.6</li>
<li>Item 2.4.7</li>
<li>Item 2.4.8</li>
<li>Item 2.4.9</li>
</ul>
</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</form>
</body>
</html>
9、异步树的加载
jquery.treeview.async用于在页面显示一个树形菜单，其特点在于所有节点都是异步获取的(只加载所需的节点，避免一次性加载全部导致客户端浏览器卡死)，服务器端返回json格式的对象数组即可。每个json对象可以包含如下属性：
说明：异步获取节点数据时，treeview会使用get方式提交一个参数(root)到服务器端，treeview初始化(首次加载)时，这个参数值为source，之后异步获取子节点时，参数值为所点击节点的id值，服务器端需根据这一参数值不同返回不同的json对象数组：
Step1:添加jquery.treeview.async.js的引用
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../lib/jquery.cookie.js" type="text/javascript"></script>
<script src="../jquery.treeview.js" type="text/javascript"></script>
<script src="../jquery.treeview.async.js" type="text/javascript"></script>
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../lib/jquery.cookie.js" type="text/javascript"></script>
<script src="../jquery.treeview.js" type="text/javascript"></script>
<script src="../jquery.treeview.async.js" type="text/javascript"></script>
Step2:前台HTML
<div id="main">
<ul>
<li><a href=".">Main Demo</a></li>
<li><a href="source.phps">Server component used</a></li>
</ul>
<h4>Lazy-loading tree</h4>
<ul id="black">
</ul>
</div>
Step3:前台JS
<script type="text/javascript">
$(document).ready(function(){
$("#black").treeview({
url: "source.aspx"
})
});
</script>
<div id="main">
<ul>
<li><a href=".">Main Demo</a></li>
<li><a href="source.phps">Server component used</a></li>
</ul>
<h4>Lazy-loading tree</h4>
<ul id="black">
</ul>
</div>
Step3:前台JS
<script type="text/javascript">
$(document).ready(function(){
$("#black").treeview({
url: "source.aspx"
})
});
</script>
Step4:后台source.aspx
protected void Page_Load(object sender, EventArgs e)
{
//代表首次加载
if (Request["root"] != null && Request["root"].ToString() == "source")
{
Response.Write("[" + "{'text':'根节点1','id':'root1','hasChildren':'true'},{'text':'根节点2','id':'root2','hasChildren':'true'}" + "]");
}
else
{
if (Request["root"] != null) //说明点击的是root1
{
string id = Request["root"].ToString();
if (id=="root1")
Response.Write("[{'text':'根节点1-子节点1','id':'root1-child1'},{'text':'根节点1-子节点2','id':'root1-child2'}]");
else if (id=="root2")
Response.Write("[{'text':'根节点2-子节点1','id':'root2-child1'},{'text':'根节点2-子节点2','id':'root2-child2'}]");
}
}
}
protected void Page_Load(object sender, EventArgs e)
{
//代表首次加载
if (Request["root"] != null && Request["root"].ToString() == "source")
{
Response.Write("[" + "{'text':'根节点1','id':'root1','hasChildren':'true'},{'text':'根节点2','id':'root2','hasChildren':'true'}" + "]");
}
else
{
if (Request["root"] != null) //说明点击的是root1
{
string id = Request["root"].ToString();
if (id=="root1")
Response.Write("[{'text':'根节点1-子节点1','id':'root1-child1'},{'text':'根节点1-子节点2','id':'root1-child2'}]");
else if (id=="root2")
Response.Write("[{'text':'根节点2-子节点1','id':'root2-child1'},{'text':'根节点2-子节点2','id':'root2-child2'}]");
}
}
}
效果：
代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TreeViewAsyncLoadDemo.aspx.cs" Inherits="TreeViewAsyncLoadDemo" %>
<!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>
<link href="jquery.treeview/jquery-treeview/jquery.treeview.css" rel="stylesheet"
type="text/css" />
<script src="jquery.treeview/jquery-treeview/lib/jquery.js" type="text/javascript"></script>
<script src="jquery.treeview/jquery-treeview/lib/jquery.cookie.js" type="text/javascript"></script>
<script src="jquery.treeview/jquery-treeview/jquery.treeview.js" type="text/javascript"></script>
<%-- <script src="jquery.treeview/jquery-treeview/jquery.treeview.async.js" type="text/javascript"></script>--%>
<script src="jquery.treeview/jquery-treeview/jquery.treeview.async.plug.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$("#black").treeview({
url: "HandleTreeViewAsyncLoadDemo.aspx"
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="main" style="float:left;width:200px;">
<ul id="black">
</ul>
</div>
<div id="divRight" style="float:left">
<!--扩展的插件 能添加两个属性 URL 和 target-->
<iframe id="myiframe" name="myiframe" style="width:500px;height:500px;display:block" src=""></iframe>
</div>
</form>
</body>
</html>
后台：
protected void Page_Load(object sender, EventArgs e)
{
if (Request["root"] != null)
{
string id = Request["root"].ToString();
if (id == "source") //说明是第一次请求数据
{
Response.Write("[{'text':'根节点1','id':'root1','hasChildren':'true'},{'text':'根节点2','id':'root2','hasChildren':'true'}]");
}
else if (id == "root1") //说明请求根节点1下面的数据
{
Response.Write("[{'text':'根节点1-子节点1','url':'http://www.google.cn','target':'_blank'},{'text':'根节点1-子节点2',url:'MyFrame.htm','target':'myiframe'}]");
}
else if (id == "root2") //说明请求根节点2下面的数据
{
Response.Write("[{'text':'根节点2-子节点1'},{'text':'根节点2-子节点2'}]");
}
}
}
jQuery.treeview.async.plug.js扩展插件
利用此插件可以让后台返回的json数据,多两个属性,
url,target.
形如:
"[{'text':'根节点1-子节点1','url':'http://www.google.cn','target':'_blank'},{'text':'根节点1-子节点2',url:'MyFrame.htm','target':'myiframe'}]"
