jquery.treeview.js php mysql_使用jQuery Treeview插件实现树状结构效果

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

这个树状结构使用的HTML为

• 标记，层层嵌套实现联级关系，具体的输出与样式的设置请看源码。

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

  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]

  $(document).ready(function(){

  //给ID为browser的UL标签添加树状交互

  $("#browser").treeview({

  persist: "location",

  collapsed: true,

  unique: true

  });

  });

  [HTML]

  • Folder 1
    • Item 1.1
  • Folder 2
    • Subfolder 2.1
      • File 2.1.1
      • File 2.1.2
    • File 2.2
  • Folder 3 (closed at start)
    • File 3.1
  • File 4

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

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

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

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