學習一門新的東西 重要是看api 和demo ztree是做樹形結構比較好的一個jq插件 國內要用到樹形結構的應該至少在一半以上都用的樹結構！那麼讓我們簡單的構建一個樹形結構吧
首先 我們可以看一下demo 在index裏面我們可以清晰的看到一句話
$.fn.zTree.init($("#myZtree"), setting，data); 這句話的以上就是初始化一棵樹 同時data 我們也可以通過字面意思瞭解到是數據 這個數據對於我們學數據的一般是從後臺獲取的！！
這個時候就需要我們建後臺數據庫了！下面寫下我自己寫的三種簡單的實現方式
第一種 查詢 返回list數據！！！！！
z有時候我們查詢出來的數據 是list集合 不想去做一個json的轉換 這個時候我們要怎麼做呢
首先 ：我們要異步加載 ztree爲我們提供了異步加載的api 方法
async: {
enable: true, //
url: "/city",//請求的地址
autoParam: ["id"] // 返回後臺的數據 Id
}
因爲 ztree默認是json構建的 所以我們要是想要ztree能直接翻譯list數據 我們就需要把默認的json轉換成list數據
ztree給我們提供了 simpleData
simpleData 的官方解釋爲確定 zTree 初始化時的節點數據、異步加載時的節點數據、或 addNodes 方法中輸入的 newNodes 數據是否採用簡單數據模式 (Array)不需要用戶再把數據庫中取出的 List 強行轉換爲複雜的 JSON 嵌套格式
默認值：false 默認配置是這樣的：
data: { //simpleData
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
}
這樣的話 我們後臺只要封裝的是list集合 傳遞過來就可以構建數了
返回list 還有一種方法：不做主要介紹 把代碼粘貼上來 給大家參考一下
var setting = {
check: {
enable: true,
chkStyle: "radio",
radioType: "all"
radioType: "level"
},
data: {
//不需要把list數據轉換成json
simpleData: {
enable: true
}
}, callback: {
//用於捕獲節點被展開的事件回調函數
onExpand: zTreeOnExpand,
onClick: function (e, treeId, treeNode, clickFlag) {
//勾選
$.fn.zTree.getZTreeObj("myZtree").checkNode(treeNode, !treeNode.checked, true);
}
}
};
//加載展開方法
function zTreeOnExpand(event, treeId, treeNode) {
//treeId 是mytree treeNode相當於對象 當前點擊的對象
var treeNodeId = treeNode.id; //就是數據庫裏的id
$.post(
'/city',
{parentId: treeNodeId},
function (data) {
//獲取樹對象
var tree = $.fn.zTree.getZTreeObj("myZtree");
//是否進行過異步加載 false表示需要異步加載 相當於去重
if (!treeNode.zAsync) {
tree.addNodes(treeNode, data);
treeNode.zAsync = true;
} else {
//強行異步加載
tree.reAsyncChildNodes(treeNode, "refresh");
}
}
);
}
//首次進入加載level爲1的
$(function () {
$.post(
'/city',
function (data) {
$.fn.zTree.init($("#myZtree"), setting, data);
}
);
});
第二種：後臺傳回數據是json
其實這一種跟第一種差不多 因爲 是默認的json 所以我們只需要
async: {
enable: true, //
url: "/city",//請求的地址
autoParam: ["id"] // 返回後臺的數據 Id
} 這一個方法就可以了
同時我們也要把後臺查詢到的list數據 轉換成json 現在我們做json的轉換一般用三種方法
如果不知道的可以百度 推薦fastjson