zTree簡單使用(非同步載入)
阿新 • • 發佈:2019-01-07
最近使用zTree進行目錄的展示,使用了基本的用法,做下記錄
可以直接去zTree的官網上進行檢視相關的使用說明,不過第一次沒太明白,多看幾篇介紹基本就可以解決了
http://www.treejs.cn/v3/main.php zTree的官網
API點選相關方法會有相關彈框提示
第一步,下載zTree相關的檔案
找到檔案中的js,如下三個
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.ztree.core.js"></script>
<link href ="css/zTreeStyle.css" />
第二步:進行設定setting引數:
使用非同步載入方式,callback為獲取引數完成時進行的回撥操作
var setting = {
view : {
showIcon : false,
fontCss : setFontCss_ztree//進行樣式設定的方法
},
data : {
simpleData : {
enable : true,//是否之用簡單資料
idKey : 'id' , //對應json資料中的ID
pIdKey : 'parentId' //對應json資料中的父ID
},
},
async : {
enable : true,//是否為非同步載入
url : url,//相關的請求網址
otherParam : {
"id" : list//傳引數,寫法和可以參考API文件
},
},
callback : {//請求成功後回撥
onClick : onclickTree,//點選相關節點觸發的事件
onAsyncSuccess : ztreeOnAsyncSuccess,//非同步載入成功後執行的方法
},
};
//點選樹觸發的事件
function onclickTree(event, treeId, treeNode) {
alert(treeNode.id+" "+treeNode.name);
)}
//獲取樹成功後進行的回撥操作
function ztreeOnAsyncSuccess(event, treeId, treeNode) {
//展開樹
expand_ztree(treeId)
}
/**
* 展開樹
* @param treeId
*/
function expand_ztree(treeId){
var treeObj = $.fn.zTree.getZTreeObj(treeId);
treeObj.expandAll(true);
}
/**
* 設定樹節點字型樣式
*/
function setFontCss_ztree(treeId, treeNode) {
if (treeNode.id == 0) {
//根節點
return {color:"#333", "font-weight":"bold"};
} else if (treeNode.isParent == false){
//葉子節點
return {color:"#660099", "font-weight":"normal"};
} else {
//父節點
return {color:"#333", "font-weight":"normal"};
}
}
第三步:初始化呼叫
$(function() {
$.fn.zTree.init($("#testTree"), setting, null);//對應ul要顯示的ID,對應相關的setting,如果非同步載入,最後一個引數為空,否則為響應的資料
})
第四步:html檔案引用,在哪裡顯示zTree
<div id="content">
<ul id="testTree" class="ztree"></ul>//class中ztree為zTree需要使用的
</div>
完成
使用的json資料格式如下
{“id”:”123”,”isHidden”:false,”open”:true,”parentId”:”“,”ext1”:”“,”name”:”1xxx”,”uuid”:”xxxxx”,”checked”:false},{“id”:”456”,”isHidden”:false,”open”:true,”parentId”:”123”,”ext1”:”“,”name”:”1.1xxxx”,”uuid”:”xxxxx”,”checked”:false}
open代表是否展開該節點,parentid父子關係對應
簡單的非同步獲取目錄結構完成