添加authtree插件到java项目

最近项目需要一个树形插件来实现对权限的控制，找遍了度娘，发现一个很熟悉的的字眼，layui 自身提供一个 tree 树形菜单，但是没有在示例中提供，只能到扩展模块找。

项目开源地址：https://github.com/wangerzi/layui-authtree

再下载了这个插件之后呢，复制里面的extends和layui 目录到项目里面(注意，这两个文件必须在同一个目录下)，创建一个div 来作为tree的容器，配置文件如下

<div id="LAY-auth-tree-index"></div>

layui.config({

base: '/PTEStudyItem/assets/Permission/extends/',

}).extend({

authtree: 'authtree',

});

var layer;

        layui.use(['form','layer','authtree'], function(){

           $ = layui.jquery;

          var form = layui.form;

          layer = layui.layer;

          var authtree = layui.authtree;

          // 一般来说，权限数据是异步传递过来的

 $.ajax({

//url: '/PTEStudyItem/assets/Permission/tree.json',

url: 'json文件的请求地址',

dataType: 'json',

success: function(data){

   //console.log(data.data.trees);

            var trees = data.data.trees;

            // 如果后台返回的不是树结构，请使用 authtree.listConvert 转换

            authtree.render('#LAY-auth-tree-index', trees, {

inputname: 'authids[]',

layfilter: 'lay-check-auth',

autowidth: true,

});

           }

        });

         

    });

 

请求的Json文件格式：

{

  "code": 0,

  "msg": "获取成功",

  "data": {

    "trees":[

     {"name": "基础管理", "value": "", "checked": false, "disabled": false, "list":[

        {"name": "资料分类", "value": "", "checked": false, "disabled": false,"list":[

               {"name": "查看", "value": "73", "checked": false},

   {"name": "添加", "value": "74", "checked": false},

               {"name": "删除", "value": "76", "checked": false}

]},

            {"name": "上传资料", "value": "", "checked": false,"list":[

   {"name": "查询", "value": "77", "checked": false},

   {"name": "上传", "value": "78", "checked": false},

               {"name": "删除", "value": "80", "checked": false}

]}

]}

    ]

  }

}