jquery.treeview.js树控件的应用

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

一、静态树的写法

< 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(){

$( " #navigation " ).treeview({
persist: " location " ,
collapsed: true ,
unique: true
});

});

</ script >



< ul id = " navigation " >
< li >< a href = " ?1 " > 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 >
< li >< a href = " ?1.2 " > Item 1.2 </ a >
< ul >
< li >< a href = " ?1.2.0 " > Item 1.2 . 0 </ a >
< ul >
< li >< a href = " ?1.2.0.0 " > Item 1.2 . 0.0 </ a ></ li >
< li >< a href = " ?1.2.0.1 " > Item 1.2 . 0.1 </ a ></ li >
< li >< a href = " ?1.2.0.2 " > Item 1.2 . 0.2 </ a ></ li >
</ ul >
</ li >
< li >< a href = " ?1.2.1 " > Item 1.2 . 1 </ a >
< ul >
< li >< a href = " ?1.2.1.0 " > Item 1.2 . 1.0 </ a ></ li >
</ ul >
</ li >
< li >< a href = " ?1.2.2 " > Item 1.2 . 2 </ a >
< ul >
< li >< a href = " ?1.2.2.0 " > Item 1.2 . 2.0 </ a ></ li >
< li >< a href = " ?1.2.2.1 " > Item 1.2 . 2.1 </ a ></ li >
< li >< a href = " ?1.2.2.2 " > Item 1.2 . 2.2 </ a ></ li >
</ ul >
</ li >
</ ul >
</ li >
</ ul >
</ li >
< li >< a href = " ?2 " > Item 2 </ a >
< ul >
< li >< span > Item 2.0 </ span >
< ul >
< li >< a href = " ?2.0.0 " > Item 2.0 . 0 </ a >
< ul >
< li >< a href = " ?2.0.0.0 " > Item 2.0 . 0.0 </ a ></ li >
< li >< a href = " ?2.0.0.1 " > Item 2.0 . 0.1 </ a ></ li >
</ ul >
</ li >
</ ul >
</ li >
< li >< a href = " ?2.1 " > Item 2.1 </ a >
< ul >
< li >< a href = " ?2.1.0 " > Item 2.1 . 0 </ a >
< ul >
< li >< a href = " ?2.1.0.0 " > Item 2.1 . 0.0 </ a ></ li >
</ ul >
</ li >
< li >< a href = " ?2.1.1 " > Item 2.1 . 1 </ a >
< ul >
< li >< a href = " ?2.1.1.0abc " > Item 2.1 . 1.0 </ a ></ li >
< li >< a href = " ?2.1.1.1 " > Item 2.1 . 1.1 </ a ></ li >
< li >< a href = " ?2.1.1.2 " > Item 2.1 . 1.2 </ a ></ li >
</ ul >
</ li >
< li >< a href = " ?2.1.2 " > Item 2.1 . 2 </ a >
< ul >
< li >< a href = " ?2.1.2.0 " > Item 2.1 . 2.0 </ a ></ li >
< li >< a href = " ?2.1.2.1 " > Item 2.1 . 2.1 </ a ></ li >
< li >< a href = " ?2.1.2.2 " > Item 2.1 . 2.2 </ a ></ li >
</ ul >
</ li >
</ ul >
</ li >
</ ul >
</ li >
< li >< a href = " ?3 " > Item 3 </ a >
< ul >
< li class = " open " >< a href = " ?3.0 " > Item 3.0 </ a >
< ul >
< li >< a href = " ?3.0.0 " > Item 3.0 . 0 </ a ></ li >
< li >< a href = " ?3.0.1 " > Item 3.0 . 1 </ a >
< ul >
< li >< a href = " ?3.0.1.0 " > Item 3.0 . 1.0 </ a ></ li >
< li >< a href = " ?3.0.1.1 " > Item 3.0 . 1.1 </ a ></ li >
</ ul >
</ li >
< li >< a href = " ?3.0.2 " > Item 3.0 . 2 </ a >
< ul >
< li >< a href = " ?3.0.2.0 " > Item 3.0 . 2.0 </ a ></ li >
< li >< a href = " ?3.0.2.1 " > Item 3.0 . 2.1 </ a ></ li >
< li >< a href = " ?3.0.2.2 " > Item 3.0 . 2.2 </ a ></ li >
</ ul >
</ li >
</ ul >
</ li >
</ ul >
</ li >
</ ul >

二、动态树的生成

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

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