最近项目需要一个树形插件来实现对权限的控制,找遍了度娘,发现一个很熟悉的的字眼,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}
]}
]}
]
}
}