共计 1782 个字符，预计需要花费 5 分钟才能阅读完成。
1. 和另一篇文章 –[TreeGrid 实现增删改查] 后面的内容统一，只须要创立一个 html 页面，命名为 ztree-01.html，粘贴如下网址的代码进入 ztree-01.html。
拜访 http://www.treejs.cn/v3/faq.php#_206 复制这些代码 <!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var zTreeObj;
// zTree 的参数配置，深刻应用请参考 API 文档（setting 配置详解）var setting = {};
// zTree 的数据属性，深刻应用请参考 API 文档（zTreeNode 节点数据详解）var zNodes = [
{name:"test1", open:true, children:[{name:"test1_1"}, {name:"test1_2"}]},
{name:"test2", open:true, children:[{name:"test2_1"}, {name:"test2_2"}]}
];
$(document).ready(function(){zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</SCRIPT>
</HEAD>
<BODY>
<div>
<ul id="treeDemo" class="ztree"></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);
})});
批改后的代码如图所示
页面运行成果如图所示：
正文完
