用jquery的小插件jquery.treeview实现树状结构
步骤:
1)在页面中引入相应的js、和css文件(还有相应的图片)
<!-- 1,导入js与css文件 -->
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="jquery.treeview.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.treeview.css">
2、写要显示的<ui><li>列表
例子:
<ul id="
tree" class="
filetree">
<li><input type="checkbox"><span class="
folder">系统管理</span>
<ul>
<li><input type="checkbox">
岗位管理
<ul>
<li>岗位列表</li>
<li>岗位删除</li>
</ul>
</li>
<li>部门管理</li>
<li>用户管理</li>
</ul>
</li>
<li>网上交流</li>
</ul>
3、文档加载完后执行treeview插件
<script type="text/javascript">
$(function(){
$("
#tree").treeview();
});
</script>
插件github
下载:
https://github.com/adobe1992/async-jquery-treeview