ztree是一個依靠 jQuery 實現的多功能 “樹外掛”。優異的效能、靈活的配置、多種功能的組合是 zTree 最大優點。 
zTree 是開源免費的軟體。

1.首先，使用ztree需要引入兩個檔案：

zTreeStyle.css以及jquery.ztree.all-3.5.js。

2.頁面新增zTree的容器，class屬性為ztree

<div id="pertree" class="ztree"></div>

3.引入資料

ztree 可以解析JSON結構的資料，有兩種方式可以把資料傳給ztree容器生成樹結構

1）直接把json資料傳給元件。

$(document).ready(function(){
    $.fn.zTree.init($("#pertree"), setting, zNodes);
});
 

2)非同步獲取json格式資料，第三個引數傳null或者空著。

$(document).ready(function(){
    $.fn.zTree.init($("#pertree"), setting, null);
});

 樹的配置

var setting = {
			check:{enable:true,nocheckInherit:true,chkboxType:{"Y":"ps","N":"ps"}},
			view:{selectedMulti:false,nameIsHTML: true, showLine: true,showIcon: true},
			data:{simpleData:{enable:true,idKey: "id",pIdKey: "pId",rootPId: 0},key:            
            {title:""}},
			callback:{
				beforeClick: function (treeId, treeNode, clickFlag) {
					var pertree = $.fn.zTree.getZTreeObj(treeId);
					pertree.checkNode(treeNode, !treeNode.checked, true, true);
					return false;
				}
			}
		}，pertree, loadTree = function(){
			$.get("${pageContext.request.contextPath }/group/getperTree/${group.id}", function(data) {
				pertree = $.fn.zTree.init($("#pertree"), setting, data); //.expandAll(true);
			}, null, null, "正在載入，請稍後...");
		};
		loadTree();
 

check：配置複選框.

view：配置樹結構樣式

data：配置接收的JSON資料格式

callback:回撥函式