有了这个插件以后,我们只需要简单几步就可以实现树状图效果:

一、用ul li做一个树状图的结构;

二、引入jQuery-treeview的文件;

三、配置jQuery-treeview的一些参数;

html代码:

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>网站标题</title>
  <style type="text/css">
  </style>
  <link rel="stylesheet" href="jquery.treeview.css" />
 </head>
 <body>
  <ul id="tree" class="filetree">
 <li>主节点内容
  <ul>
  <li>主节点的子节点1</li>
  <li>主节点的子节点2
<ul>
<li><span class="folder">主节点的子节点2的子节点</span></li>
<li>主节点的子节点2的子节点</li>
<li>主节点的子节点2的子节点</li>
<li>主节点的子节点2的子节点</li>
</ul>
  </li>
  <li>主节点的子节点3</li>
  <li>主节点的子节点4</li>
  </ul>
</li>
</ul>
<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">
 $("#tree").treeview();
</script>
 </body>
</html>

1、animated:String or Number
设置展开子节点时的显示速度,有 slow、normal、fast 或者指定速度值,与 jQuery 的 hide(show)中的 speed 参数相似。

这里有个问题,如果使用动态的效果,这时候给人一闪一闪的感觉,如果不喜欢可以不使用这个属性就可以,这样就没有那种一闪一闪的感觉了

 

2、persist:String
记忆折叠的方式。location:页面刷新不保留折叠状态;cookie:页面刷新保留折叠状态。

3、collapsed:boolean  Default: false, all expanded
初始化时的折叠状态。true,初始化为收缩节点状态;false,为全部节点展开。

4、unique:boolean  Default: false
展开同级节点的唯一性。true,当展开一个节点时,同级的其他节点会自动关闭;false,当展开一个节点时,同级的其他节点保持原形。

5、control:Selector
指定一个容器,控制整个tree的展开,收缩 或者收放 所有的节点。

例如:

$(".selector").treeview({control: "#container"})

6.toggle:Callback

当一个节点的收放状态改变时,调用自定义函数Callback。

例如:

$(".selector").treeview({toggle:function(){console.log(this+" has been toggle");}})


7.add:Selector

向已有的树中追加节点,selector 为需要追加的节点集合,该集合中的节点须与已有树的节点结构保持一致。

例如:


var tree = $(".selector").treeview();
        $(".button").click(function() {
          var newSublist =  $("New Sublist" +
             "Item1" +
             "Item2").appendTo(tree);
          tree.treeview({
            add: newSublist
          });
        });



8.cookieId:String

设置 persist: cookie 后 用此参数设置cookie 的名称。

9.url:String
异步加载时,设置url 地址。


官方公众号