zTree是一個依靠 jQuery 實現的多功能的樹外掛

官網:http://www.treejs.cn/v3/api.php

簡單使用:

1.引入css和js

<link rel="stylesheet" href="${ctx}/staticfile/components/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<scrip type="text/javascript" src="${ctx}/staticfile/components/zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${ctx}/staticfile/components/zTree/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="${ctx}/staticfile/components/zTree/js/jquery.ztree.excheck-3.5.min.js"></script>
 

2.簡單配置

	var setting = {
		check: {
			enable: true
		},
		data: {
			simpleData: {
				enable: true  
    		}
		}
	};

3.獲取後臺傳來的資料

後端返回json資料,為了業務需求需要在要顯示的物件中新增id,pid,checked屬性

private String id;  //moduleId
private String pId;  //上級的moduleId
private Boolean checked;//預設false

4.頁面進行初始化zTree,載入資料

	//這裡相當於在拿後來傳來的資料，後臺在傳資料的時候，屬性名要對應上
		var zNodes =${zTreeJson};
		
	$(document).ready(function(){
		$.fn.zTree.init($("#htZtree"), setting, zNodes);

		var zTreeObj = $.fn.zTree.getZTreeObj("htZtree");
		zTreeObj.expandAll(true);		//展開所有樹節點
	});
 

5.將選中的資料傳到後臺

		//獲取到所以使用者選中的節點id值
		//獲取所有選擇的節點，提交時呼叫下面函式
		function submitCheckedNodes(treeNode) {
			//自定義陣列
			var nodes = new Array();
			var zTreeObj = $.fn.zTree.getZTreeObj("htZtree");
			nodes = zTreeObj.getCheckedNodes(true);		//取得選中的結點
			var str = "";
			for (i = 0; i < nodes.length; i++) {
				if (str != "") {
					str += ",";
				}
				//獲取每一個被選擇的節點的id的值,拼接為字串
				str += nodes[i].id;
			}
			
			$('#roleIds').val(str);		//將拼接完成的字串放入隱藏域，這樣就可以通過post提交
		}