html結合js實現簡單的樹狀目錄
阿新 • • 發佈：2019-02-20
最近在學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 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.執行效果：
