樹狀結構---用jquery的小外掛jquery.treeview實現樹狀結構
阿新 • • 發佈:2019-01-27
用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