html页面怎么以树状图样式显示出文件夹及其下的子文件夹

只是静态展示效果的话，HTML里的ul标签搭配一些CSS代码就能实现，如果想实现动态交互，例如点击展开、折叠文件夹的话，需要使用JS，当然，有专门的插件可以实现，例如：zTree，官网：http://www.treejs.cn

可以通过jQuery的treeview插件实现，基本实现代码如下：

<link rel="stylesheet" href="../jquery.treeview.css" type="text/css" />

<script src="../js/jquery.js"></script>

<script type="text/javascript" src="../js/jquery.treeview.js"></script>

<script src="../js/jquery.cookie.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#red").treeview({

animated: "fast",

collapsed: true,

unique: true,

toggle: function() {

window.console &&console.log("%o was toggled", this)

}

})

})

</script>

html如下：

<ul id="red">

<li class="open"><span>北京市</span>

<ul>

<li class="open"><span>西城区</span>

<ul>

<li class="open"><span>西直门</span>

<ul>

<li><span>西环广场</span></li>

</ul>

</li>

<li><span>马甸</span>

<ul>

<li><span>浙江大厦</span></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

一、 新增节点

1、 新增的基本功能样式可以在tree里面的案例找到，我这里用的添加节点是子节点，父节点其实是不用插件里面那个添加的。只要配置合适，给子节点添加子节点，该节点就会自动变成父节点的，前提是取消节点锁定。

2、下面三个a标签分别是添加、修改和删除，把id等值写对了就能对树进行编辑 *** 作了。

3、 只要上面的HTML样式写对了，点击了a标签它插件就会自己调用下面的add方法，新增节点后，在data那里获取值传到控制器，再通过从控制器返回的id来添加到刚新增的节点上，这一步非常关键，如果没有成功返回id到节点上，后面对刚新增的节点进行修改或删除 *** 作时就会失效，并且刷新下页面又可以了，这个问题就是新增后的节点没有id造成的。

---