1.和另一篇文章--[TreeGrid 实现增删改查]前面的内容一致，只需要创建一个html页面，命名为ztree-01.html，粘贴如下网址的代码进入ztree-01.html。
访问http://www.treejs.cn/v3/faq.php#_206复制这些代码
html>
ZTREE DEMO TITLE>HEAD>
- ul>
div>
BODY>
HTML>
2.在ztree-01.html做如图所示修改
第一步:引入所需的css样式和js
第二步:修改代码，如图所示：
说明：访问http://www.treejs.cn/v3/faq.php#_206，点击demo
可以看到左面菜单栏里有最简单的树选项，点击第一个--最简单的树 -- 标准JSON数据，如图所示
3.第三步:第一个既然不是我们要找的格式，就查看第二个 最简单的树 -- 简单JSON数据，如图所示
4.第四步：访问访问http://www.treejs.cn/v3/faq.p...，点击上方的API文档，找到data里面的simpleData，参考下图查找到这里
4-1复制这块的代码进入html页面
3.在html页面把如下没用的代码删除掉
------删除掉这些代码--------
var zNodes = [ {name:"test1", open:true, children:[ {name:"test1_1"}, {name:"test1_2"}]}, {name:"test2", open:true, children:[ {name:"test2_1"}, {name:"test2_2"}]} ];
在var settting里添加如下代码：
data:{ simpleData:{ enable:true, idKey:"id", pIdKey:"parentId", rootPId:null
}
}
如图所示：
4.在function做如下修改
$(document).ready(function () {
let url="http://localhost:8080/category/doFindCategorys";
$.get(url,function (result){ console.log(result); zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, result);
})
});
修改后的代码如图所示
页面运行效果如图所示：
文章来源: segmentfault.com，作者：于影，版权归原作者所有，如需转载，请联系作者。
原文链接：segmentfault.com/a/1190000038138328
