jquery.treeview.js树控件实现树概要思路

来源：互联网发布：centos下安装mysql 编辑：程序博客网时间：2024/06/05 06:43

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