zTree插件的入门

最新推荐文章于 2024-05-10 09:39:31 发布

GotBy

最新推荐文章于 2024-05-10 09:39:31 发布

阅读量167

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45262834/article/details/113792334

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

入门案例

前言
一、zTree是什么？
二、使用步骤
- 1.导入
- 2.通过异步查询数据

前言

zTree入门案例的学习

一、zTree是什么？

zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件。
在这里插入图片描述

二、使用步骤

1.导入

代码如下（示例）：

 <!--第一步： 引入ztree的css与js-->
    <link rel="stylesheet" href="/plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="/plugins/ztree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/plugins/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="/plugins/ztree/js/jquery.ztree.excheck-3.5.js"></script>
</head>
<body>
    <!--第二步： 预留一个ul标签用于展示树-->
    <ul id="treeDemo" class="ztree"></ul>
</body>

ztree需要数据的结构

var zNodes =[
    { id:1, pId:0, name:"saas管理", open:true},
    { id:11, pId:1, name:"企业管理"},
    { id:111, pId:1, name:"模块管理"}
];

2.通过异步查询数据

 <script>
    //1. 页面加载完毕之后，我们就发出异步请求，请求树的数据
    $(function(){
        $.ajax({
           url:"/system/role/getTreeNodes.do",
           data:{"roleid":"${role.id}"},
           dataType:"json",
           success:function(treeData){
               // 1.定义一个全局参数
               var setting = {
                   check: {
                       enable: true     //是否为复选框
                   },
                   data: {
                       simpleData: {
                           enable: true   //控制是否有子父节点
                       }
                   }
               };

               // 2. 获取到tree所要的数据

               var zNodes =treeData;

               // 3. 把数据与ul标签、全局参数三者整合一起就形成一颗树
               $.fn.zTree.init($("#treeDemo"), setting, zNodes);

           }
        });
    })

</script>

后端代码补充：

 /* 
   url：/system/role/getTreeNodes.do
   作用：得到ztree所要的数据
   参数：roleid : 角色id
   返回值：json对象
    */
    @RequestMapping("/getTreeNodes")
    @ResponseBody
    public List<Map<String,Object>>  getTreeNodes(String roleid) {
        //1. 查询所有模块
        List<Module> moduleList = moduleService.findAll();
        //2. 定义一个集合接收结果
        List<Map<String,Object>> resultList = new ArrayList<>();

        //3.把当前角色的权限id全部查询出来。
       List<String> moduleIdList =  moduleService.findRoleModuleByRoleId(roleid);

        //4. 遍历所有的模块，把模块的信息存储到结果中
        for (Module module : moduleList) {
            //一个module就要转换为一个map
            Map<String,Object> map = new HashMap<>();
            map.put("id",module.getId());
            map.put("pId",module.getParentId());
            map.put("name",module.getName());
            map.put("open",true);
            //如果当前角色拥有模块才选中。
            if(moduleIdList.contains(module.getId())) {
                map.put("checked", true);//选中
            }
            //把map存储结果的List中
            resultList.add(map);
        }
        //5. 返回
        return resultList;

GotBy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
zTree插件的入门

入门案例前言一、zTree是什么？二、使用步骤1.导入2.通过异步查询数据前言zTree入门案例的学习一、zTree是什么？zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件。二、使用步骤1.导入代码如下（示例）：  <link rel="stylesheet" href="/plugins/ztree/css/zTreeStyle/zTreeStyle.css" t
复制链接

扫一扫