1.方式一：自己通过ajax请求获取数据后，再将节点信息传给zTree。（省略项目创建和controller的创建，不会的可以看文章《IDEA中创建SpringBoot项目，并实现HelloWorld》）
在controller中写一个接口，返回需要的数据。
@RestController @RequestMapping("/student/courseDocument") public class CourseDocumentController { @Autowired private CourseDocumentService courseDocumentService; @GetMapping("/getByStudentId") public AjaxResult getByStudentId(HttpSession session) { Student student = (Student) session.getAttribute("student"); if (ObjectUtil.isNotNull(student)) { String studentId = student.getId(); LambdaQueryWrapper<CourseDocument> wrapper = Wrappers.<CourseDocument>lambdaQuery() .eq(CourseDocument::getStudentId, studentId); List<CourseDocument> courseDocuments = courseDocumentService.list(wrapper); return AjaxResult.success("查询成功",courseDocuments); } return AjaxResult.success("学生信息不存在"); } }
前端通过Ajax获取，并直接传到zTree中。
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head th:replace="fragment/header :: bootstrapHeader"> </head> <head th:replace="fragment/header :: zTree"> </head> <head> <script> let zNodes; $(document).ready(function () { $.ajax({ type: "get", url: "/student/courseDocument/getByStudentId", async: false, success: function (response) { zNodes = response.data; } }); let setting = { view: { dblClickExpand: false, showLine: true, selectedMulti: false }, data: { key: { //显示的名称在列表中的属性名 name: "name" }, simpleData: { enable: true, //id在列表中的属性名 idKey: "id", //父id在列表中的属性名 pIdKey: "parentId" } } }; zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); </script> </head> <body> <div> <div id="treeDemo" class="ztree"></div> </div> </body> </html>
结果：
提示：
1、后端，返回数据进行了封装，用到了MybatisPlus。哪怕没用过也没事，只要能返回一个List就可以了，只是介绍思想。
2.前端，用的是thymeleaf，通过模块的方式导入的js和css。自己可以导入jquery的js、zTree的js和css和相关图片也可以实现。最后保持下面这种结构，尤其是css最好和img图片在同一层。可以自己去gitee上下载，zTree的gitee网址。下载.zip文件后，将css文件下的zTreeStyle整体拷贝，导入这个包下面的zTreeStyle.css就可以了。最后导入.zip中js文件夹下的jquery.ztree.all.js拷贝，并导入就可以了。
注意：
1.class必须为ztree，否则css会失效。
2.setting配置，可以查看相关API。下面是我的列表信息，可比对上面的属性设置。
2.方式二：通过setting中的async属性，访问后端获取数据。
@RestController @RequestMapping("/student/courseDocument") public class CourseDocumentController { @Autowired private CourseDocumentService courseDocumentService; @GetMapping("/getByStudentId") public List<CourseDocument> getByStudentId(HttpSession session) { Student student = (Student) session.getAttribute("student"); if (ObjectUtil.isNotNull(student)) { String studentId = student.getId(); LambdaQueryWrapper<CourseDocument> wrapper = Wrappers.<CourseDocument>lambdaQuery() .eq(CourseDocument::getStudentId, studentId); List<CourseDocument> courseDocuments = courseDocumentService.list(wrapper); return courseDocuments; } return null; } }
注意：此时返回的数据必须是需要拼成树的节点集合，不能会再封装，否则，会显示空值。为什么？因为我就犯过这个错误。我本来打算，通过配置获取后端数据，再取出数据进行赋值。但是，setting中没有这个配置，然后，查看源码可以发现，ztree会直接取出数据进行赋值。
源码截图
前端的内容改为
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head th:replace="fragment/header :: bootstrapHeader"> </head> <head th:replace="fragment/header :: zTree"> </head> <head> <script> let zNodes; $(document).ready(function () { let setting = { async: { //异步是否开启，true代表开启 enable: true, url: "/student/courseDocument/getByStudentId", type: "get" }, view: { dblClickExpand: false, showLine: true, selectedMulti: false }, data: { key: { //显示的名称在列表中的属性名 name: "name" }, simpleData: { enable: true, //id在列表中的属性名 idKey: "id", //父id在列表中的属性名 pIdKey: "parentId" } } }; zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, null); }); </script> </head> <body> <div> <div id="treeDemo" class="ztree"></div> </div> </body> </html>
此时，节点信息传null就可以了。
以上内容也是自己刚学的，可能有很多不完善的地方，甚至是错误的，请多包涵！！！一起学习，不要颓废，多学点东西总是没错的！！！
