1.
jquery treeview 插件參數說明
treeview開源地址：https://github.com/jzaefferer/jquery-treeview
1、animated：String or Number
設置展開子節點時的顯示速度，有 slow、normal、fast 或者指定速度值，與 jQuery 的 hide（show）中的 speed 參數相似。
這里有個問題,如果使用動態的效果,這時候給人一閃一閃的感覺,如果不喜歡可以不使用這個屬性就可以,這樣就沒有那種一閃一閃的感覺了
2、persist：String
記憶折疊的方式。location：頁面刷新不保留折疊狀態；cookie：頁面刷新保留折疊狀態。
3、collapsed：boolean Default: false, all expanded
初始化時的折疊狀態。true，初始化為收縮節點狀態；false，為全部節點展開。
4、unique：boolean Default: false
展開同級節點的唯一性。true，當展開一個節點時，同級的其他節點會自動關閉；false，當展開一個節點時，同級的其他節點保持原形。
5、control：Selector
指定一個容器,控制整個tree的展開,收縮 或者收放 所有的節點。
example
$(".selector").treeview({
control: "#container"
})
6.toggle：Callback
當一個節點的收放狀態改變時，調用自定義函數Callback。
example
$(".selector").treeview({
toggle: function() {
console.log(this + " has been toggle");
}
})
7.add：Selector
向已有的樹中追加節點，selector 為需要追加的節點集合，該集合中的節點須與已有樹的節點結構保持一致。
example
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
});
});
8.cookieId：String
設置 persist: cookie 后 用此參數設置cookie 的名稱。
9.url：String
異步加載時，設置url 地址。
下面就來看看如何的實用
官方參考網站包涵Demo下載：http://bassistance.de/jquery-plugins/
html頁引用和JS部分
<head runat="server">
<%-- 文件引用部分，該部分都可從官方參考Demo中獲得，其中cookie為上述參數“persist”服務來記錄刷新前展示信息--%> <link href="jquery.treeview.css" rel="stylesheet" type="text/css" /> <script src="http://www.cnblogs.com/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="jquery.cookie.js" type="text/javascript"></script> <script src="jquery.treeview.js" type="text/javascript"></script> <title></title> <script type="text/javascript"> $(function () { $("#tree1").treeview({ collapsed: true, control: "#sidetreecontrol", persist: "cookie", unique: true, toggle: function (e) { $('ul', this).html('<li><a href=\"?/index.cfm\"><strong>hello</strong></a></li>');//這兒可以替換異步取數據函數 e.preventDefault();//阻止事件冒泡 } }); }) </script> </head>
Body結構
<ul id="tree1"> <li>主節點內容 <ul> <li>主節點的子節點1</li> <li>主節點的子節點2 <ul> <li>主節點的子節點2的子節點</li> <li>主節點的子節點2的子節點</li> <li>主節點的子節點2的子節點</li> <li>主節點的子節點2的子節點</li> </ul> </li> <li>主節點的子節點3</li> <li>主節點的子節點4</li> </ul> </li> </ul>
加載節點時如果數據量很大，可先加載主節點，子節點通過參數toggle來異步加載
由treeview樹的規律，我們可以從數據庫中來加載所需要的樹
<%
DALZzjg dal = new DALZzjg(); DALYhxx ydal = new DALYhxx(); List<Xtgl_Zzjg> lists = new List<Xtgl_Zzjg>(); lists = dal.FindWhere(" zzjg_npcode='10' "); string str = "<ul id=\"tree1\">"; str += "<li><a href=\"?/index.cfm\"><strong>Home</strong></a>"; if (lists.Count > 0) { str += "<ul>"; foreach (Xtgl_Zzjg c in lists) { str += "<li><a href=\"?/index.cfm\"><strong>" + c.Zzjg_Nmc + "</strong><span style=\"display:none;\">" + c.Zzjg_Ncode + "</span></a>"; DALUserAndDep yydal = new DALUserAndDep(); List<View_UserandDep> listschild = new List<View_UserandDep>(); listschild = yydal.FindWhere(" zzjg_ncode='" + c.Zzjg_Ncode + "' order by px "); if (listschild.Count > 0) { str += "<ul>"; foreach (View_UserandDep p in listschild) { // str += "<li><a href=\"?/index.cfm\"><strong>" + p.Yhxx_Nname + "</strong></a></li>"; } str += "</ul>"; } str += "</li>"; } str += "</ul>"; } str += "</li></ul>"; Response.Write(str); %>