zTree异步加载子树实例

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

sjc7140

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

阅读量374

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/sjc7140/article/details/100191284

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求：项目中存在“合伙人”这样一个角色，合伙人可以有自己的下级合伙人，现在要再网页中使用树状结构显示合伙人关系。

由于这个项目每个合伙人只记录了自己下面一级的合伙人，一次性查出所有等级合伙人结构比较复杂。所以做成了点击一个合伙人，去后台查询它的子合伙人，动态加载出来的实现。

树插件使用了zTree。zTree官网

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>合伙人结构</title>
    <script src="${basePath}/resources/module/global_module.js"></script>
    <link rel="stylesheet" href="${basePath}/resources/widget/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="${basePath}/resources/widget/zTree_v3/js/jquery.ztree.all.min.js"></script>
</head>
<body>
<span style="color:grey">(蓝色姓名为代理)</span>
<%-- 容器用于生成树 --%>
<div id="tree" class="ztree"></div>

<%--保证最后执行--%>
<script src="${basePath}/resources/js/agency/agencyTreePage.js"></script>
</body>
</html>

//树加载的方法：根节点的id和name是有的，然后点击根节点，根据根节点//的id查询子节点。
loadData:function(id,name){
            let zTreeObj;
            let setting = {
                view:{
                    nameIsHTML:true, //允许HTML格式的数据
                    showIcon:false  //关闭图标
                },
                async: {
                    enable:true,        //开启异步加载
                    autoParam:["id=id"],   //自动提交的属性
                    url:_basePath + "/vipInfo/getPartnerList.json",
                    dataFilter:filter,  //处理ajax数据格式
                },
                date:{
                    key:{name:'name'},
                    simpleData: {
                        enable:true,    //开启Array格式
                        idKey: "id",    //节点id
                        pIdKey: "pid",     //父节点id
                    }
                },

            };
			//根节点的初始化，name属性是名称，pid是树的父级的id，这里是根节点，所以指定为0
			//isParent属性决定了是否显示“+”,能点击展开执行查询子树的操作
            let zNodes =[{name:name, id:id,pid:"0",isParent:true}]; 
/*filter是最重要的一个方法，childNodes是你查询得到的数据，
不同的场景返回的数据可能不同，我当时只是照着网上的方法写，
没有修改这个方法，是根本没用的，后来在这个方法内将数据处理了。
*/
            function filter(treeId, parentNode, childNodes) {   //childNodes是ajax返回的数据,这里将返回数据处理成json数组
                if (!childNodes) return null;
                let response =  []; //子节点集合
                for (let i=0, l=childNodes.data.length; i<l; i++) {
                    let node = {};
                    if(childNodes.data[i].isAgency == 1){//如果是代理显示蓝色
                        node.name = '<span style="color: blue">'+childNodes.data[i].name+'</span>';
                    }else{//不是代理显示黑色
                        node.name = childNodes.data[i].name;//添加name属性
                    }
                    node.id = childNodes.data[i].id;//添加id属性
                    if(childNodes.data[i].hasSubVip == 1){//如果由下级会员，就显示加号可以继续查询
                        node.isParent = true;
                    }
                    response.push(node)//子节点集合添加子节点
                }
                return response;
            }
            zTreeObj = $.fn.zTree.init($("#tree"), setting,zNodes);
        },

前台Controller

@RequestMapping("/getPartnerList")
    @ResponseBody
    public Object getPartnerList(@RequestParam Long id){
        System.out.println(id);
        return success(vipInfoServiceImpl.getPartnerList(id));
    }

返回的数据格式

{"returnCode":0,"returnMsg":"","timestamp":1567388356913,"data":[{"isAgency":1,"name":"孙明霞","id":56,"hasSubVip":1},{"isAgency":0,"name":"恒雅形象2-Amy Wang","id":46,"hasSubVip":1}]}

最终效果

sjc7140

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
zTree异步加载子树实例

需求：项目中存在“合伙人”这样一个角色，合伙人可以有自己的下级合伙人，现在要再网页中使用树状结构显示合伙人关系。由于这个项目每个合伙人只记录了自己下面一级的合伙人，一次性查出所有等级合伙人结构比较复杂。所以做成了点击一个合伙人，去后台查询它的子合伙人，动态加载出来的实现。树插件使用了zTree。zTree官网<%@ page contentType="text/html;charset...
复制链接

扫一扫