插件的官方网站: 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 >
< 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的其他方法实现