zTree插件的入门

入门案例

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


前言

zTree入门案例的学习


一、zTree是什么?

zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件。
zTree插件的入门_第1张图片

二、使用步骤

1.导入

代码如下(示例):

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

你可能感兴趣的:(前端插件,jquery)