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

最新推荐文章于 2024-03-09 21:49:48 发布

skyjian10

最新推荐文章于 2024-03-09 21:49:48 发布

阅读量3.3w

点赞数 7

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

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

版权

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

2 篇文章 0 订阅

订阅专栏

首先准备好后台数据：这里我就不贴SQL了,因为数据是别人博客里面的.后面会标明出处.

这里写图片描述

引入对应的js和css，没有这些文件的小伙伴可以点击
http://www.treejs.cn/v3/api.php 下载

<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>

核心代码:

<body>
            <div style="width:15%;">
                <ul id="demotree" class="ztree"></ul>
            </div>
</body>

<script type="text/javascript">
    var setting = {
                isSimpleData : true, //数据是否采用简单 Array 格式，默认false
                treeNodeKey : "id", //在isSimpleData格式下，当前节点id属性
                treeNodeParentKey : "pId", //在isSimpleData格式下，当前节点的父节点id属性
                showLine : true, //是否显示节点间的连线
<%--                async:{--  zTree官方文档说明  异步加载必须写上这个参数  但是我这里没写T-T 一样的可以 不知道我是不是假的异步加载 本人在这里也有疑问 %>  
<%--                    enable: true,--%>
<%--                    url: "<%=basePath%>department/testYbTree2.do",--%>
<%--                    autoParam: ["id"]--%>
<%--                },--%>
                callback :{
                    onClick : function(event, treeId, treeNode, clickFlag) {  
                        // 判断是否父节点  
                        if(!treeNode.isParent){  
                            //alert("treeId自动编号：" + treeNode.tId + ", 节点id是：" + treeNode.id + ", 节点文本是：" + treeNode.name);  
                            $.ajax({
                                url: "<%=basePath%>department/testYbTree2.do",//请求的action路径
                                data:{"pid":treeNode.id},
                                error: function () {//请求失败处理函数
                                    alert('请求失败');
                                },
                                success:function(data)
                                    { //添加子节点到指定的父节点
                                        var jsondata= eval(data);
                                        if(jsondata == null || jsondata == ""){
                                            //末节点的数据为空   所以不再添加节点  这里可以根据业务需求自己写
                                            //$("#treeFrame").attr("src",treeNode.url);
                                            }
                                        else{
                                                var treeObj = $.fn.zTree.getZTreeObj("demotree");
                                                //treeNode.halfCheck = false;
                                                var parentZNode = treeObj.getNodeByParam("id", treeNode.id, null);//获取指定父节点
                                                newNode = treeObj.addNodes(parentZNode,jsondata, false);
                                            }
                                    }
                                });
                        } 
                    }
                },
                //checkable : true //每个节点上是否显示 CheckBox
                };

        var zTree;
        var treeNodes;

        $(function(){
                $.ajax({
                    async : false,
                    cache:false,
                    type: 'POST',
                    dataType : "json",
                    url: "<%=basePath%>department/testYbTree2.do",//请求的action路径
                    error: function () {//请求失败处理函数
                        alert('请求失败');
                    },
                    success:function(data){ //请求成功后处理函数。
                    treeNodes = eval(data); //把后台封装好的简单Json格式赋给treeNodes
                }
                });
            });


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

后台controller层
这里我用的是springMvc

@RequestMapping(value="/testYbTree2")
    public void testYbTree2(HttpServletRequest request,HttpServletResponse response)throws Exception{
        String pid = request.getParameter("pid");
        if(pid == null || pid == ""){//初始化节点的时候  默认查询最顶级的节点  即pid=0
            pid="0";
        }
        List<TestYbTree> list = departmentService.listTestYbTree1(pid);
        for(int i=0;i<list.size();i++){
            int flag = list.get(i).getFlag();
            if(flag == 1){//对应数据库的flag字段
                //因为初始化查询的节点没有子节点  为了不让图标太难看  所以这里自己定义一个样式
                list.get(i).setIcon("plugins/zTree/3.5/img/diy/1_open.png");
            }
        }
        JSONArray arr = JSONArray.fromObject(list);
        response.setCharacterEncoding("UTF-8");
        response.getWriter().print(arr);
    }

arr的数据格式如图
这里写图片描述

可能有的小伙伴和我的controller层写法不同,这其实是问题不大的,只要我们最后返回的json格式一样满足zTree的格式要求即可.

实体类TestYbTree


        private int id;  
        private int pId;  
        private String name;  
        private int isParent;
        private String icon;


        public String getIcon() {
            return icon;
        }

        public void setIcon(String icon) {
            this.icon = icon;
        }

        public int getIsParent() {
            return isParent;
        }

        public void setIsParent(int isParent) {
            this.isParent = isParent;
        }

        private String url;
        private int flag;


        public int getFlag() {
            return flag;
        }

        public void setFlag(int flag) {
            this.flag = flag;
        }

        public String getUrl() {
            return url;
        }

        public void setUrl(String url) {
            this.url = url;
        }

        public int getId() {  
            return id;  
        }  

        public void setId(int id) {  
            this.id = id;  
        }  

        public int getpId() {  
            return pId;  
        }  

        public void setpId(int pId) {  
            this.pId = pId;  
        }  

        public String getName() {  
            return name;  
        }  

        public void setName(String name) {  
            this.name = name;  
        }

页面效果图如下:
初始化的时候:
这里写图片描述

单击节点(点击“清华大学”):
这里写图片描述

继续点击节点效果如图:
这里写图片描述

PS:departmentService.listTestYbTree1(pid)方法是我调用数据库层获取数据的方法,每个可能都不同,如我上面所说,只要保持最后的返回格式一致就行.

<%--                async:{--  zTree官方文档说明  异步加载必须写上这个参数  但是我这里没写T-T 一样的可以 不知道我是不是假的异步加载 本人在这里也有疑问 %>  
<%--                    enable: true,--%>
<%--                    url: "<%=basePath%>department/testYbTree2.do",--%>
<%--                    autoParam: ["id"]--%>
<%--                },--%>

这段我注释掉的方法,ztree官方Api说明必须添加,但是我没添加,所以我现在也有点怀疑我是不是实现的是假的异步加载,可是又确实达到了我要的效果,如果有什么不妥之处,希望各位看官多加指点.

部分内容引用:http://blog.csdn.net/IndexMan/article/details/78573782
我最开始想用该博主的方法实现异步加载,但是怎么点击都没有反应,所以我就自己给自己写了一个点击事件 T-T

skyjian10

关注

7
点赞
踩
27

收藏

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

首先准备好后台数据：这里我就不贴SQL了,因为数据是别人博客里面的.后面会标明出处.引入对应的js和css，没有这些文件的小伙伴可以点击 http://www.treejs.cn/v3/api.php 下载&lt;script type="text/javascript" src="static/js/jquery-1.7.2.js"&gt;&lt;/script&gt; ...
复制链接

扫一扫