一个简单便捷的树形显示Ztree

这是本人在闲时研究的一个用于显示树形列表的小玩意。

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

下面就说说怎么用吧

一、引用需要的js和css，具体可以在官网下载

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

二、页面上绘制一个div，如下

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

三、写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！树就这么轻松的搞定了，如果您认为上文有用的话，请点赞收藏，如果有错，欢迎评论留言，一起探讨！