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

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

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飘逸飘逸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值