TreeView樹狀結構

00潤物無聲00發表於2017-01-15
View

  做OA系統，許可權控制部分用到了樹狀結構，通過勾選來為不同的使用者分配許可權。


  

  通過點選“+”對樹展開或者摺疊，我們這裡使用了封裝好的jquery.treeview.js來實現樹狀結構的功能；


主體程式碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>

	<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
	
	<!-- 1.匯入css,js-->
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.treeview.js"></script>
	<link rel ="stylesheet" type="text/css" href="jquery.treeview.css">
</head>

<body>

	<!-- 2，使用ul展示資料-->
	<ul id="tree">
		<li>系統管理
			<ul>
				<li>部門管理</li>
				<li><div onclick="$(this).next().toggle()" >崗位管理</div>
					<ul>
						<li>崗位新增</li>
						<li>崗位刪除</li>
					</ul>
				</li>
				<li><input type="checkbox"></input>使用者管理</li>
			</ul>		
		</li>
		<li>審批流轉</li>
	</ul>

	<!--3.顯示為樹狀結構-->
	<script type="text/javascript">
	<!--當文件載入完之後，再執行-->
	$("#tree").treeview();
	</script>
</body

</html>

整個過程分為3部：

1.匯入jquery.js 和 jquery.treeview.js以及相應的css樣式檔案

2.使用<ul> 和 <li>標籤展示資料

3.當文件載入完之後，執行treeview()方法;


測試的檔案結構圖

  

  

  onclick="$(this).next().toggle()"：表示滑鼠點選時，功能進行展開和摺疊；


  完成


相關文章