ztree+ajax+json请求，实现加载一棵ztree树
前面的话：zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据。
ztree官方文档：http://www.treejs.cn/v3/api.php
现在写了一个小的demo，具体可以参考官方文档，从文档上拿来一串json数据，放在前端的代码里面，方便大家查看效果，以及方便后端返回的数据。
<!DOCTYPE html><html><head><title>ztree</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="ztree_v3/css/zTreeStyle/zTreeStyle.css" /><link rel="stylesheet" type="text/css" href="ztree_v3/ztree_custom.css" /><script src="js/jquery-2.1.1.min.js"></script><script src="ztree_v3/js/jquery.ztree.core-3.5.min.js"></script><script src="ztree_v3/js/jquery.ztree.excheck-3.5.min.js"></script><script src="ztree_v3/js/jquery.ztree.exedit-3.5.min.js"></script></head><body><div class="content_wrap"><div class="zTreeDemoBackground left"><ul id="sys" class="ztree"></ul></div></div></body><script type="text/javascript">var setting = {view: {showLine: false, //不显示连接线//showIcon: showIconForTree //不显示文件夹图标(调用showIconForTree())},data: {simpleData: {enable: true}}};var nodes = [{ id: 1, pId: 0, name: "父节点1 - 展开", open: false }, //根据pId参数指定父结点{ id: 11, pId: 1, name: "父节点11 - 折叠" },{ id: 111, pId: 11, name: "叶子节点111" },{ id: 112, pId: 11, name: "叶子节点112" },{ id: 113, pId: 11, name: "叶子节点113" },{ id: 114, pId: 11, name: "叶子节点114" },{ id: 12, pId: 1, name: "父节点12 - 折叠" },{ id: 121, pId: 12, name: "叶子节点121" },{ id: 122, pId: 12, name: "叶子节点122" },{ id: 123, pId: 12, name: "叶子节点123" },{ id: 124, pId: 12, name: "叶子节点124" },{ id: 13, pId: 1, name: "父节点13 - 没有子节点", isParent: false },{ id: 2, pId: 0, name: "父节点2 - 折叠" },{ id: 21, pId: 2, name: "父节点21 - 展开", open: false },{ id: 211, pId: 21, name: "叶子节点211" },{ id: 212, pId: 21, name: "叶子节点212" },{ id: 213, pId: 21, name: "叶子节点213" },{ id: 214, pId: 21, name: "叶子节点214" },{ id: 22, pId: 2, name: "父节点22 - 折叠" },{ id: 221, pId: 22, name: "叶子节点221" },{ id: 222, pId: 22, name: "叶子节点222" },{ id: 223, pId: 22, name: "叶子节点223" },{ id: 224, pId: 22, name: "叶子节点224" },{ id: 23, pId: 2, name: "父节点23 - 折叠" },{ id: 231, pId: 23, name: "叶子节点231" },{ id: 232, pId: 23, name: "叶子节点232" },{ id: 233, pId: 23, name: "叶子节点233" },{ id: 234, pId: 23, name: "叶子节点234" },{ id: 3, pId: 0, name: "父节点3 - 没有子节点", isParent: true }];/*function showIconForTree(treeId, treeNode) {return !treeNode.isParent;};*/$(document).ready(function() {$.fn.zTree.init($("#sys"), setting, nodes);});</script></html>
在浏览器里面打开，效果如图所示：
把demo放在了github上面，有需要的可以自行下载;github：https://github.com/wangxiaoting666/ztree
现在如果是把数据放在json里面，通过ajax去请求，动态渲染出来。
这里的一切插件直接去前面给到的ztree的官方网站上去下载到本地，就可以直接引用了。
demo如下：
<!DOCTYPE html><html><head><title>ztree</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="ztree_v3/css/zTreeStyle/zTreeStyle.css" /><link rel="stylesheet" type="text/css" href="ztree_v3/ztree_custom.css" /><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="ztree_v3/js/jquery.ztree.core-3.5.min.js"></script><script src="ztree_v3/js/jquery.ztree.excheck-3.5.min.js"></script><script src="ztree_v3/js/jquery.ztree.exedit-3.5.min.js"></script></head><body><ul id="zTree" class="ztree" style="background: #0b2b5f;"></ul></body><script type="text/javascript">//树形菜单var zTreeObj; //定义ztree对象initTree(); //初始化ztreevar setting = {check: {enable: true,chkStyle: "checkbox",chkboxType: {"Y": "s","N": "s"}},view: {selectedMulti: true,showLine: false},data: {key: {name: "name"},simpleData: {enable: true,pIdKey: "pId",}},};//请求数据function initTree() {$.get("test.json", function(data) {console.log(JSON.stringify(data));zTreeObj = $.fn.zTree.init($("#zTree"), setting, data);zTreeObj.expandAll(true);});}</script></html>
test.json数据
自己动手，写一些模拟的json数据吧。
[{"id": 1,"pId": null,"name": "特物联","iconSkin": null,"checked": null,"isParent": true,"token": null},{"id": 2,"pId": 1,"name": "管理部","iconSkin": null,"checked": null,"isParent": false,"token": null},{"id": 157,"pId": 2,"name": "我问问","iconSkin": null,"checked": null,"isParent": false,"token": null},{"id": 158,"pId": 157,"name": "呜呜呜","iconSkin": null,"checked": null,"isParent": false,"token": null},{"id": 160,"pId": 158,"name": "热热","iconSkin": null,"checked": null,"isParent": false,"token": null},{"id": 159,"pId": 2,"name": "热热","iconSkin": null,"checked": null,"isParent": false,"token": null},{"id": 134,"pId": 1,"name": "研发部","iconSkin": null,"checked": null,"isParent": false,"token": null},{"id": 140,"pId": 1,"name": "安环部","iconSkin": null,"checked": null,"isParent": false,"token": null},{"id": 143,"pId": 1,"name": "会议部","iconSkin": null,"checked": null,"isParent": false,"token": null},{"id": 152,"pId": 1,"name": "生产部","iconSkin": null,"checked": null,"isParent": false,"token": null}]
另外：
往期合集
一些demo
jQuery的ztree仿windows文件新建和拖拽效果https://www.jianshu.com/p/bfa67325719c
ztree实现编辑和删除功能https://www.jianshu.com/p/95d1df89665f
ztree实现根节点单击事件，显示节点信息https://www.jianshu.com/p/1e0ca6d8afad
谁借莪１个温暖的怀抱￠
系统管理员
刺骨的言语ヽ痛彻心扉
你的名字
我就是我
红太狼
还没有评论，来说两句吧...