ztree实现异步加载(点击节点,请求后台数据,添加数据到对应节点)真正实现了异步树加载数据

最新推荐文章于 2022-11-25 18:57:56 发布

skyjian10

最新推荐文章于 2022-11-25 18:57:56 发布

阅读量5.7k

点赞数 1

分类专栏： ztree异步加载文章标签： zTree 异步树 SpringBoot thymeleaf

本文链接：https://blog.csdn.net/skyjian10/article/details/91394652

版权

ztree异步加载专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ztree实现异步加载

首先说一下这篇文章和我写的上一篇异步树的区别：

上一篇的我实现的是其实是个伪异步加载,因为我实际是把异步的操作写在了节点上面，点击节点时，获取当前节点的ID，取回子节点的数据，然后手动拼接到当前节点下面。

真正的异步其实是应该点击树前面的"+"号，然后用zTree自带的异步功能请求后台(也就是我上一篇存在疑问的地方)，获取数据后自动拼接到当前请求的节点。

好了，直接上代码，我现在用的框架是SpringBoot+thymeleaf,写法还是差不多的。

页面代码：treeList.html 引入文件注意改成自己需要的写法

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>Insert title here</title>

    <!-- thymeleaf引入模板写法 jsp用jsp引入写法即可 -->
    <script type="text/javascript" th:src="@{/jq/jquery-1.7.2.js}" src="../static/jq/jquery-1.7.2.js"></script>
    <script type="text/javascript" th:src="@{/ztree/jquery.ztree.all-3.5.js}" src="../static/ztree/jquery.ztree.all-3.5.js"></script>
    <script type="text/javascript" th:src="@{/ztree/jquery.ztree.core-3.5.js}" src="../static/ztree/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" th:src="@{/ztree/ztreeBranchExt.js}" src="../static/ztree/ztreeBranchExt.js"></script>
    <link   type="text/css" rel="stylesheet" th:href="@{/ztree/zTreeStyle.css}" href="../static/ztree/zTreeStyle.css">

</head>
<body>
<h2>树列表</h2>
<body>
<div style="width:15%;">
    <ul id="demotree" class="ztree"></ul>
</div>
</body>

<script th:inline="javascript">
    /*<![CDATA[*/
    var setting = {//初始化树设置
            isSimpleData : true, //数据是否采用简单 Array 格式，默认false
            treeNodeKey : "id", //在isSimpleData格式下，当前节点id属性
            treeNodeParentKey : "pId", //在isSimpleData格式下，当前节点的父节点id属性
            showLine : true, //是否显示节点间的连线
                        async:{//异步设置
                        enable: true,
                        type:"get",
                        url: "/SpringBoot/tree/asyncTree",
                        autoParam: ["id"],
                        dataType: "text",
                        //异步返回结果集处理(必须返回json数据)
                        dataFilter: function(treeId, parentNode, responseData){
                            return responseData;
                           /* var  treeNodes = eval(responseData);
                            return treeNodes;
                            */
                        }
                    },
    callback :{
        onClick : function(event, treeId, treeNode, clickFlag) {//树节点点击事件  根据业务自己定义
            alert(1);
        }
        //,onAsyncSuccess: filter
    },
    //checkable : true //每个节点上是否显示 CheckBox
    };

    var zTree;
    var treeNodes;
    var list = [[${trees}]];//获取初始化页面时的数据  //JSP需要换成JSP自己的写法
    treeNodes = eval(list);

    //初始化节点
    $(document).ready(function(){
        $.fn.zTree.init($("#demotree"), setting, treeNodes);
    });

    /*]]>*/
</script>

</body>
</html>

对比上一篇异步树的文章可以发现，代码少了很多,真正的异步其实是可以减少很多操作的。

controller层代码：TreeController.java 我这里改成了先进入controller，再跳转回页面。
当然也可以继续沿用我上篇文章的写法,先进入页面,用ajax请求后台加载初始化树。

package com.luoj.springboot.controller.Tree;

import com.alibaba.fastjson.JSON;
import com.github.pagehelper.PageInfo;
import com.luoj.springboot.controller.Result;
import com.luoj.springboot.entity.User;
import com.luoj.springboot.entity.tree.Tree;
import com.luoj.springboot.service.tree.ITreeService;
import com.luoj.springboot.service.user.impl.UserService;
import com.luoj.springboot.utils.PageUtils;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import java.util.List;

@RestController
@RequestMapping("/tree")
public class TreeController {

    @Resource
    private ITreeService treeService;

    /**
     * 初始化页面接口
     * @param request
     * @return
     */
    @RequestMapping(value="/getTree",method = RequestMethod.GET)
    public ModelAndView getTree(HttpServletRequest request){
        ModelAndView mv = new ModelAndView();
        String pid = request.getParameter("id");
        if(pid == null || pid == ""){//初始化节点的时候  默认查询最顶级的节点  即pid=0
            pid="0";
        }
        List<Tree> list = treeService.getTree(pid);//取出树的数据
        for(int i=0;i<list.size();i++){
           /**
             * 这里可以多加一层查询,用当前节点去数据库取下级节点的数据,如果有下级节点的数据,就setIsParent为1,对应页面
             * 上的图标前面就会有个+号  没有的话设置为0  也就不能继续请求下一级了
             */
            list.get(i).setIsParent(1);//我这里是默认都有下一级  可以根据自己的业务写
        }
        String treeJson = JSON.toJSONString(list);
        mv.addObject("trees",treeJson);
        mv.setViewName("/tree/treeList");
        return mv;
    }

    /**
     * 异步请求接口
     * @param request
     * @return
     */
    @RequestMapping(value="/asyncTree",method = RequestMethod.GET)
    public String asyncTree(HttpServletRequest request){
        String pid = request.getParameter("id");
        if(pid == null || pid == ""){//初始化节点的时候  默认查询最顶级的节点  即pid=0
            pid="0";
        }
        List<Tree> list = treeService.getTree(pid);
        for(int i=0;i<list.size();i++){
        /**
             * 这里可以多加一层查询,用当前节点去数据库取下级节点的数据,如果有下级节点的数据,就setIsParent为1,对应页面
             * 上的图标前面就会有个+号  没有的话设置为0  也就不能继续请求下一级了
             */
            list.get(i).setIsParent(1);//我这里是默认都有下一级  可以根据自己的业务写
        }
        String treeJson = JSON.toJSONString(list);//必须是json格式的数据
        //[
        // {"id":2,"isParent":0,"name":"软件工程学院","pId":1},{"id":3,"isParent":0,"name":"国际贸易学院","pId":1},
        // {"id":4,"isParent":0,"name":"土木工程学院","pId":1},{"id":5,"isParent":0,"name":"机电学院","pId":1}
        // ]
        return treeJson;
    }
}

zTree实体类：Tree.java

package com.luoj.springboot.entity.tree;

public class Tree {

    private int id;//本级ID
    private int pId;//父ID
    private String name;
    private int isParent;//1 是父级  0不是父级
    private String icon;//自定义图标

	//get...
	//set...
}

页面效果：

在这里插入图片描述
ps:这里可能会显示不出来树的图标和样式。因为我这里引入的文件还包含了自带的图标icon。
解决办法：把外部JS和CSS的引入

<script type="text/javascript" th:src="@{/ztree/jquery.ztree.all-3.5.js}" src="../static/ztree/jquery.ztree.all-3.5.js"></script>
<script type="text/javascript" th:src="@{/ztree/jquery.ztree.core-3.5.js}" src="../static/ztree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" th:src="@{/ztree/ztreeBranchExt.js}" src="../static/ztree/ztreeBranchExt.js"></script>
<link   type="text/css" rel="stylesheet" th:href="@{/ztree/zTreeStyle.css}" href="../static/ztree/zTreeStyle.css">

替换成我上一篇异步树文章的引入

<script type="text/javascript" src="static/js/jquery-1.7.2.js"></script> 
<link type="text/css" rel="stylesheet" href="plugins/zTree/3.5/zTreeStyle.css"/> 
<script type="text/javascript" src="plugins/zTree/2.6/jquery.ztree-2.6.min.js"></script> 
<script type="text/javascript" src="plugins/zTree/3.5/jquery.ztree.core-3.5.js"></script>

同样还是去http://www.treejs.cn/v3/api.php 下载对应的文件即可，注意对应版本号。
想和我用同样版本的可以去自己下载图标icon或者私信我,我把图标icon发给你,这里我不知道怎么上传图标。

skyjian10

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
9
评论
ztree实现异步加载(点击节点,请求后台数据,添加数据到对应节点)真正实现了异步树加载数据

ztree实现异步加载首先说一下这篇文章和我写的上一篇异步树的区别：上一篇的我实现的是其实是个伪异步加载,因为我实际是把异步的操作写在了节点上面，点击节点时，获取当前节点的ID，取回子节点的数据，然后手动拼接到当前节点下面。真正的异步其实是应该点击树前面的"+"号，然后用zTree自带的异步功能请求后台(也就是我上一篇存在疑问的地方)，获取数据后自动拼接到当前请求的节点。好了，直接上代码，...
复制链接

扫一扫