jquery.treeview.js树控件的应用

插件的官方网站： http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
官方提供的插件实例：http://jquery.bassistance.de/treeview/treeviewDemo.html

一、静态树的写法

1. <script src="../lib/jquery.js" type="text/javascript"></script> 
2.  <script src="../lib/jquery.cookie.js" type="text/javascript"></script> 
3.  <script src="../jquery.treeview.js" type="text/javascript"></script> 
4.  
5.  <script type="text/javascript"> 
6.  
7. $(document).ready(function(){  
8.    
9.  $("#navigation").treeview({  
10.   persist: "location",  
11.   collapsed: true,  
12.   unique: true  
13.  });  
14.  
15. });  
16.  
17. </script> 
18.  
19.  
20.  
21.  <ul id="navigation"> 
22.   <li><a href="?1">Item 1</a> 
23.    <ul> 
24.     <li><a href="?1.0">Item 1.0</a> 
25.      <ul> 
26.       <li><a href="?1.0.0">Item 1.0.0</a></li> 
27.      </ul> 
28.     </li> 
29.     <li><a href="?1.1">Item 1.1</a></li> 
30.     <li><a href="?1.2">Item 1.2</a> 
31.      <ul> 
32.       <li><a href="?1.2.0">Item 1.2.0</a> 
33.       <ul> 
34.        <li><a href="?1.2.0.0">Item 1.2.0.0</a></li> 
35.        <li><a href="?1.2.0.1">Item 1.2.0.1</a></li> 
36.        <li><a href="?1.2.0.2">Item 1.2.0.2</a></li> 
37.       </ul> 
38.      </li> 
39.       <li><a href="?1.2.1">Item 1.2.1</a> 
40.       <ul> 
41.        <li><a href="?1.2.1.0">Item 1.2.1.0</a></li> 
42.       </ul> 
43.      </li> 
44.       <li><a href="?1.2.2">Item 1.2.2</a> 
45.       <ul> 
46.        <li><a href="?1.2.2.0">Item 1.2.2.0</a></li> 
47.        <li><a href="?1.2.2.1">Item 1.2.2.1</a></li> 
48.        <li><a href="?1.2.2.2">Item 1.2.2.2</a></li> 
49.       </ul> 
50.      </li> 
51.      </ul> 
52.     </li> 
53.    </ul> 
54.   </li> 
55.   <li><a href="?2">Item 2</a> 
56.    <ul> 
57.     <li><span>Item 2.0</span> 
58.      <ul> 
59.       <li><a href="?2.0.0">Item 2.0.0</a> 
60.       <ul> 
61.        <li><a href="?2.0.0.0">Item 2.0.0.0</a></li> 
62.        <li><a href="?2.0.0.1">Item 2.0.0.1</a></li> 
63.       </ul> 
64.      </li> 
65.      </ul> 
66.     </li> 
67.     <li><a href="?2.1">Item 2.1</a> 
68.      <ul> 
69.       <li><a href="?2.1.0">Item 2.1.0</a> 
70.       <ul> 
71.        <li><a href="?2.1.0.0">Item 2.1.0.0</a></li> 
72.       </ul> 
73.      </li> 
74.       <li><a href="?2.1.1">Item 2.1.1</a> 
75.       <ul> 
76.        <li><a href="?2.1.1.0abc">Item 2.1.1.0</a></li> 
77.        <li><a href="?2.1.1.1">Item 2.1.1.1</a></li> 
78.        <li><a href="?2.1.1.2">Item 2.1.1.2</a></li> 
79.       </ul> 
80.      </li> 
81.       <li><a href="?2.1.2">Item 2.1.2</a> 
82.       <ul> 
83.        <li><a href="?2.1.2.0">Item 2.1.2.0</a></li> 
84.        <li><a href="?2.1.2.1">Item 2.1.2.1</a></li> 
85.        <li><a href="?2.1.2.2">Item 2.1.2.2</a></li> 
86.       </ul> 
87.      </li> 
88.      </ul> 
89.     </li> 
90.    </ul> 
91.   </li> 
92.   <li><a href="?3">Item 3</a> 
93.    <ul> 
94.     <li class="open"><a href="?3.0">Item 3.0</a> 
95.      <ul> 
96.       <li><a href="?3.0.0">Item 3.0.0</a></li> 
97.       <li><a href="?3.0.1">Item 3.0.1</a> 
98.        <ul> 
99.         <li><a href="?3.0.1.0">Item 3.0.1.0</a></li> 
100.         <li><a href="?3.0.1.1">Item 3.0.1.1</a></li> 
101.        </ul> 
102.       </li> 
103.       <li><a href="?3.0.2">Item 3.0.2</a> 
104.        <ul> 
105.         <li><a href="?3.0.2.0">Item 3.0.2.0</a></li> 
106.         <li><a href="?3.0.2.1">Item 3.0.2.1</a></li> 
107.         <li><a href="?3.0.2.2">Item 3.0.2.2</a></li> 
108.        </ul> 
109.       </li> 
110.      </ul> 
111.     </li> 
112.    </ul> 
113.   </li> 
114.  </ul> 

二、动态树的生成

要想动态生成jQuery的树是很简单的，你只需要通过ajax异步调用后台的方法，然后返回拼好的html字符串到前台页面就ok了

对于节点单击要触发什么事件，可以通过jQuery的其他方法实现

本文转自linzheng 51CTO博客，原文链接:http://blog.51cto.com/linzheng/1081586