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就可以了。
以上内容也是自己刚学的，可能有很多不完善的地方，甚至是错误的，请多包涵！！！一起学习，不要颓废，多学点东西总是没错的！！！
