ztree 官網地址:http://www.ztree.me/v3/api.php
1、jsp代碼
(1)、引入樣式和腳本
<link href="${ctx}/css/ztree/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/js/easydialog/easydialog.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${ctx}/js/ztree/jquery.ztree.core-3.5.js"></script>
(2)、引入內容
<div class="Tree" id="Tree" style="width: 500px; height: 250px; float: left;">
<ul id="tree" class="ztree"></ul>
</div>
(3)、js代碼
<script type="text/javascript">
var zTree;
var setting = {
view: {
showLine: true,
selectedMulti: false //不可多選
},
data: {
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
},
async:{
autoParam:["id=catalogID"],
otherParam:["type","M"],
enable:true,
dataType:"json",
type:"get",
url:"${ctx}/document/queryCatalogTree"
},
callback: {
onAsyncError: function () {
//請求失敗處理函數
alert('異步加載請求失敗!');
}
}
};
$(document).ready(function(){
$.ajax({
async : false,
cache:false,
type: 'GET',
dataType : "json",
url: "${ctx}/document/queryCatalogTree?type=M",//請求的controller路徑
error: function () {
//請求失敗處理函數
alert('查詢目錄請求失敗!');
},
success:function(data){ //請求成功後處理函數。
treeNodes = data;
}
});
$.fn.zTree.init($("#tree"), setting, eval(treeNodes));
if(treeNodes == '')
{
alert('未創建個人目錄 !');
}
});
</script>
(4)、獲取被選中的樹節點
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.getSelectedNodes();
nodes是數組類型