最近在學jsp，期末了要做項目，需要用到樹狀目錄，百度了很多，都沒有找到想要的答案，最后自己折騰了半天，才搞定。
下面我就來分享一下怎么實現一個簡單的樹狀目錄：
1. 下載jquery-treeview插件：github 百度雲
2. 解壓剛才下載的壓縮包，並將images文件夾的中gif復制到項目中的圖片管理文件夾中，如下圖：
當然復制到什么地方是你自己選擇
3. 然后將jquery.treeview.css復制到你項目的css管理文件中：
可選：復制demo/screen.css到項目中
4. 復制jquery.treeview.js到項目中的js管理文件夾中：
可選：復制demo/jquery.cookie.js到項目中
5. 修改jquery.treeview.css中圖片的路徑（一樣的就可以不修改了）：
步驟4中的img是你圖片所在的文件夾
6.在head標簽中添加連接：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/jquery.treeview.css" type="text/css"/>
<!--screen.css不要也可以-->
<link rel="stylesheet" href="css/screen.css" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!--jquery.cookie.js不要也可以-->
<script src="js/jquery.cookie.js"></script>
<script src="js/jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#treeview").treeview({
toggle: function() {
console.log("%s was toggled.", $(this).find(">span").text());
}
});
});
</script>
</head>
7.寫一點代碼來測試下：
<div id="main">
<ul id="treeview" class="filetree">
<li><span class="folder">密碼修改</span>
<ul>
<li><span class="file">密碼修改</span></li>
</ul>
</li>
<li><span class="folder">系統管理</span>
<ul>
<li><span class="file">系統管理</span></li>
</ul>
</li>
<li><span class="folder">行政部門</span>
<ul>
<li><span class="file">合同管理</span></li>
<li><span class="file">加班信息</span></li>
<li><span class="file">業績報告</span></li>
</ul>
</li>
<li><span class="folder">考勤部門</span>
<ul>
<li><span class="file">考勤信息</span></li>
</ul>
</li>
<li><span class="folder">人力資源部</span>
<ul>
<li><span class="file">添加員工</span></li>
<li><span class="file">刪除員工</span></li>
<li><span class="file">信息跟蹤</span></li>
<li><span class="file">修改員工信息</span></li>
<li><span class="file">員工信息查詢</span></li>
<li><span class="file">合同過期查詢</span></li>
</ul>
</li>
<li><span class="folder">請假管理</span>
<ul>
<li><span class="file">請假審批</span></li>
</ul>
</li>
<li><span class="folder">招聘管理</span>
<ul id="tree">
<li><span class="folder">求職者信息管理</span>
<ul>
<li><span class="file">添加</span></li>
<li><span class="file">查詢</span></li>
</ul>
</li>
<li><span class="file">添加招聘信息</span></li>
<li><span class="file">修改招聘信息</span></li>
</ul>
</li>
<li><span class="folder">財務部門</span>
<ul>
<li><span class="file">密碼修改</span></li>
<li><span class="file">薪資管理</span></li>
<li><span class="file">加班信息</span></li>
<li><span class="file">考勤信息</span></li>
<li><span class="file">業績報告</span></li>
<li><span class="file">固定薪資</span></li>
</ul>
</li>
<li><span class="folder">培訓管理</span>
<ul>
<li><span class="file">添加培訓</span></li>
<li><span class="file">修改培訓信息</span></li>
</ul>
</li>
</ul>
</div>
8.運行效果：
