使用jQuery Treeview插件实现树状结构效果

首先到一个国外网站上下载Treeview插件：
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
当然你也可以通过我博客的源文件直接下载：
https://files.cnblogs.com/jishume/jquery_api_for_dw4.rar

为了形象一点，先看一个效果图：

这个树状结构使用的HTML为<ul><li>标记，层层嵌套实现联级关系，具体的输出与样式的设置请看源码。

这里重点介绍下这个插件的几个功能效果：

1、animated:"fast"

设置展开子节点时的显示速度，一般有slow、normal、fast几个值，与jQuery的hide（show）中的speed参数相似。

2、persist: "location"

记忆折叠的方式。location，页面刷新不保留折叠状态；cookie，页面刷新保留折叠状态。
3、collapsed: true

初始化时的折叠状态。true，初始化为收缩节点状态；false，与前相反。

4、unique: true

展开同级节点的唯一性。true，当展开一个节点时，同级的其他节点会自动关闭；false，当展开一个节点时，同级的其他节点保持原形，不做为。

贴一段源码中的插件代码：
[JS]

 <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 language="javascript" type="text/javascript">
 $(document).ready(function(){

    //给ID为browser的UL标签添加树状交互
    $("#browser").treeview({
      persist: "location",
      collapsed: true,
      unique: true
     });

});

</script>

[HTML]

 <ul id="browser" class="filetree">
  <li><span class="folder">Folder 1</span>
   <ul>
    <li><span class="file">Item 1.1</span></li>
   </ul>
  </li>
  <li><span class="folder">Folder 2</span>
   <ul>
    <li><span class="folder">Subfolder 2.1</span>
     <ul id="folder21">
      <li><span class="file">File 2.1.1</span></li>
      <li><span class="file">File 2.1.2</span></li>
     </ul>
    </li>
    <li><span class="file">File 2.2</span></li>
   </ul>
  </li>
  <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
   <ul>
    <li><span class="file">File 3.1</span></li>
   </ul>
  </li>
  <li><span class="file">File 4</span></li>
 </ul>

 当然，通过jQuery的Ajax导步加载数据实现树状结构很酷，但是由于最近时间比较紧，所以会晚点提供相关源码，大家继续关注。

 

制作人：飞虎                                           无兄弟不编程！

====================================================

欢迎加QQ群进行更多交流：305397511     专注于php、mysql以及开源框架