最近的项目要用到treeview插件，刚好就自己整理一下这方面的资料。

　1.文档树示例

　　最简单的一个例子就是文档树的实现。效果如下图所示。

　　在使用treeview之前，html文档中需要包含几个jquery.js、jquery.treeview.js、jquery.treeview.css几个文件。具体的请从官网下载。记住jquery.js的引用必须在jquery.treeview.js之前。

　　具体代码如下：

 1 <h1>文件树示例</h1> 2  <ul id="file" class="filetree"> 3   <li><span class="folder">资料</span> 4     <ul> 5       <li><span class="file">光盘</span></li> 6     </ul> 7   </li> 8   <li><span class="folder">书籍</span> 9     <ul>10       <li><span class="folder">小说</span>11         <ul id="book">12           <li><span class="file">当代小说</span></li>13           <li><span class="file">古典小说</span></li>14         </ul>15       </li>16       <li><span class="file">诗歌</span></li>17     </ul>18   </li>19   <li class="closed"><span class="folder">游戏</span>20     <ul>21       <li><span class="file">休闲游戏</span></li>22     </ul>23   </li>24   <li><span class="folder">照片</span></li>25  </ul>

　　从代码中看出，要显示出文档树的效果，必须在第一个ul的class中添加filetree类。而文件夹以及文件的显示效果是通过添加一个<span></span>来实现的。文件夹使用folder类，文件使用file类。文档树的实现又是通过列表的嵌套实现的。而给包含相关文件夹li添加closed类可以使这个文件夹保持关闭状态，默认的情况下所有文档树都是打开的。

　　单纯的以上代码是不能实现文档树的效果的，要实现上图中的效果，还需要添加js代码。大家注意第一个ul中的id=file属性，这个时候就派上用场了，js代码如下：

1 $(document).ready(function(){2    $("#file").treeview();3 4  });

　　这就是一个简单文档树的实现。

　2.导航树示例

　　效果如下图所示：

　　html代码如下：

 1 <ul id="navigation"> 2     <li><a href="#"></a>菜单1 3       <ul> 4         <li><a href="#">菜单1.0</a> 5           <ul> 6             <li><a href="#">菜单1.0.0</a></li> 7           </ul> 8         </li> 9         <li><a href="#">菜单1.1</a></li>10         <li><a href="#">菜单1.2</a>11           <ul>12             <li><a href="#">菜单1.2.0</a>13               <ul>14                 <li><a href="#">菜单1.2.0.0</a></li>15                 <li><a href="#">菜单1.2.0.1</a></li>16                 <li><a href="#">菜单1.2.0.2</a></li>17               </ul>18             </li>19             <li><a href="#">菜单1.2.1</a>20               <ul>21                 <li><a href="#">菜单1.2.1.0</a></li>22               </ul>23             </li>24             <li><a href="#">菜单1.2.2</a>25               <ul>26                 <li><a href="#">菜单1.2.2.0</a></li>27                 <li><a href="#">菜单1.2.2.1</a></li>28                 <li><a href="#">菜单1.2.2.2</a></li>29               </ul>30             </li>31           </ul>32         </li>33       </ul>34     </li>35 </ul>

　　这里主要还是列表的嵌套，注意给首个ul添加navigation类属性。

　　一样的，也必须通过js才可以实现导航树的功能：

1 $("#navigation").treeview({2         persist: "location",3         collapsed: true,4         unique: true5       });

　　解释：collapsed设置为true是指导航树处于折叠状态，相当于给前面的closed属性。

原标题：jQuery treeview的简单用法

关键词：jquery