首页 前端知识 JQuery zTree获取后端数据实现树的方式

JQuery zTree获取后端数据实现树的方式

2024-04-01 10:04:43 前端知识 前端哥 789 628 我要收藏

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就可以了。

以上内容也是自己刚学的,可能有很多不完善的地方,甚至是错误的,请多包涵!!!一起学习,不要颓废,多学点东西总是没错的!!!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4397.html
标签
ajaxservlet
评论
发布的文章

java解析超大json文件数据

2024-04-19 21:04:10

头歌-JavaScript基础

2024-04-19 21:04:54

C#Json序列化及反序列化

2024-04-19 21:04:40

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!