一個簡單便捷的樹形顯示Ztree

這是本人在閒時研究的一個用於顯示樹形列表的小玩意。

zTree 是一個依靠 jQuery 實現的多功能 「樹插件」。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優勢。

下面就說說怎麼用吧

1、引用須要的js和css，具體能夠在官網下載

連接：http://www.treejs.cn/v3/main.php#_zTreeInfo

2、頁面上繪製一個div，以下

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

3、寫jQuery進行樹的初始化

var setting = {
view: {
dblClickExpand: false,
showLine: false,
selectedMulti: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},

//這是定義樹節點的點擊事件
callback: {
onClick: zTreeBeforeClick
}
};

//樹節點的點擊事件，主要用來獲取綁定節點的id，pid等等
function zTreeBeforeClick(event, treeId, treeNode) {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getSelectedNodes();
}

//下面重點來了，動態的加載樹

var zNodes = [];

$(document).ready(function () {
$.ajax({
url: "",//ajax的路徑
type: "get",
success: function (data) {
var json = JSON.parse(data);
for (var i = 0; i < json.length; i++) {
if (i == 0) {
zNodes.push({ id: json[i]["ID"], pId: json[i]["PID"], name: json[i]["Name"], open: true });
}
else {
zNodes.push({ id: json[i]["ID"], pId: json[i]["PID"], name: json[i]["Name"] });
}
}
var t = $("#treeDemo");
$.fn.zTree.init(t, setting, zNodes);
},
error: function (e) {
console.log(e);
}
})
});

OK！樹就這麼輕鬆的搞定了，若是您認爲上文有用的話，請點贊收藏，若是有錯，歡迎評論留言，一塊兒探討！