技術標籤：JQuery前端那些兒外掛javascript

實現效果: 可勾選的樹

官網傳送門

1: 引入 css 樣式, 以及js檔案

<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet" />

jquery.ztree 是依賴於 jquery的

<script type="text/javascript" src="jquery-1.4.2.js"></script>
 

<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>

2:建立一個div標籤,配置一下js就ok了

<div class="col-sm-8">
	<!-- 樹形外掛 -->
	<div id="treeDemo" class="ztree"></div>
</div>


<script type="text/javascript"
 
>
			var prefix = ctx + "/system/knowledge";
			$(function () {
				var url = ctx + "/system/category/sheBeiZiDianTreeData?categoryId=109";
				// var url = ctx + "/system/category/sheBeiZiDianTreeData?categoryId=" + $("#categoryId").val();
				var options = {
					id:
 
 "treeDemo",
					url: url,
					check: {
						enable: true, // true / false 分別表示 顯示 / 不顯示 複選框或單選框
						nocheckInherit: true, // 當父節點設定 nocheck = true 時，設定子節點是否自動繼承 nocheck = true 
						autoCheckTrigger:true, // true / false 分別表示 觸發 / 不觸發 事件回撥函式
						chkStyle: "checkbox", // 預設checkbox, 可設定選擇框為 radio 
						chkboxType: { "Y": "ps", "N": "ps" } // checkbox 勾選操作，隻影響父級節點；取消勾選操作，隻影響子級節點
					},
					expandLevel: 1, // 預設展開等級,0 代表不展開,1代表展開一級節點
				};
				$.tree.init(options);
			});