插件的官方网站： 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的其他方法实现
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
