从零开始layui树，authtree权限树
本文主要解决layui树，authtree权限树使用表格直接转化json数据生成权限树；
内容主要参考：《authtree插件github网址》 主要在使用表格直接转化json数据生成权限树添加自己理解的注释和使用结果，干货在解析表格转化json注释中，有利于理解；核心还是官网中的内容
第一步：为权限树提供容器
注意：id="LAY-auth-tree-index" 是整颗树的容器，需要包含在 form.layui-form > div.layui-form-item > div.layui-input-block 中，否则依照 layui 的规则无法渲染多选框
第二步：下载源码并引入插件 下载
1、如果使用 layuiadmin,则只需要将插件(extends/authtree.js)放到 controller/下,然后 layui.use 即可,或者可以放在 lib/extend 中,只不过需要改 config.js
2、非 layuiadmin 初始化如下：
layui.config({
base: 'extends/',//你存放authtree.js文件的位置
}).extend({
authtree: 'authtree',
});第三步：异步获取权限数据并渲染
render 传递的第一个参数，即为树的目标容器，这也是以后操作这颗树的重要标志
listConvert 是 authtree 提供的内置函数，可以将普通的列表数据转换为 权限树需要的数据结构，如有此需求请查看该函数对应文档
layui.use(['jquery', 'authtree', 'form', 'layer'], function(){
var $ = layui.jquery;
var authtree = layui.authtree;
var form = layui.form;
var layer = layui.layer;
// 一般来说，权限数据是异步传递过来的
$.ajax({
url: 'tree.json',
dataType: 'json',
success: function(data){
var trees = data.data.trees;
// 如果后台返回的不是树结构，请使用 authtree.listConvert 转换
authtree.render('#LAY-auth-tree-index', trees, {
inputname: 'authids[]',
layfilter: 'lay-check-auth',
autowidth: true,
});
}
});
});
至此，一个最基础的权限树就已经完成了，、
但是其中 tree.json 结构为
非常不方便。
当json数据是直接从表格转化而来时，可采取
html：
注意到
LAY-auth-tree-convert-index">
中权限树的id改变，其他都与前面一样，id保持与前面相同也可以，后面js中id一致就好，不要弄混
使用前需要引用：
layui.use(['jquery', 'authtree', 'form', 'layer', 'code' ], function () {})1、当json数据为
{
"code": 0,
"msg": "获取成功",
"data": {
"list": [
{ "id": 1, "name": "用户管理", "pid": 0 },
{ "id": 2, "name": "用户组管理", "pid": 0 },
{ "id": 3, "name": "角色管理", "pid": 2 },
{ "id": 4, "name": "添加角色", "pid": 3},
{ "id": 5, "name": "角色列表", "pid": 3 },
{ "id": 6, "name": "管理员管理", "pid": 0 },
{ "id": 7, "name": "添加管理员", "pid": 6 },
{ "id": 8, "name": "管理员列表", "pid": 6 }
],
"checkedId": [ 1, 2, 3, 4 ],
"disabledId": [ 7, 8 ]
}
}
js解析可用：
$.ajax({
url: url,
dataType: 'json',
success: function(res){
// 支持自定义递归字段、数组权限判断等
// 深坑注意：如果API返回的数据是字符串，那么 startPid 的数据类型也需要是字符串
var trees = authtree.listConvert(res.data.list, {
primaryKey: 'id' //标志，名字根据json可改
,startPid: 0 //起始id（根节点），根据json填写
,parentKey: 'pid' //父节点id，名字根据json可改
,nameKey: 'name' //名称，名字根据json可改
,valueKey: 'id' //value值，名字根据json可改
,checkedKey: res.data.checkedId//控制是否选中，checkedId是json中的数据
,disabledKey: res.data.disabledId//控制是否可以获得，disabledId是json中的数据
});
layui.code({
});
// 如果页面中多个树共存，需要注意 layfilter 需要不一样
authtree.render('#LAY-auth-tree-convert-index', trees, {//权限树的id
inputname: 'authids[]',//监听权限树改变，获取节点信息使用
layfilter: 'lay-check-convert-auth',//监听权限树时使用
openall: true,//展开所有节点
autowidth: true,
});
},
});效果为：
2、当json数据为（与上面相同只是改了字段名字）
json：
{
"code": 0,
"msg": "获取成功",
"data": {
"list": [
{ "id": 1, "name": "用户管理", "alias": "yhgl", "palias": "0" },
{ "id": 2, "name": "用户组管理", "alias": "yhzgl", "palias": "0" },
{ "id": 3, "name": "角色管理", "alias": "yhzgl-jsgl", "palias": "yhzgl" },
{ "id": 4, "name": "添加角色", "alias": "yhzgl-jsgl-tjjs", "palias": "yhzgl-jsgl" },
{ "id": 5, "name": "角色列表", "alias": "yhzgl-jsgl-jslb", "palias": "yhzgl-jsgl" },
{ "id": 6, "name": "管理员管理", "alias": "glygl", "palias": "0" },
{ "id": 7, "name": "添加管理员", "alias": "glygl-tjgly", "palias": "glygl" },
{ "id": 8, "name": "管理员列表", "alias": "glygl-glylb", "palias": "glygl" }
],
"checkedAlias": [ "yhgl", "yhzgl", "yhzgl-jsgl", "yhzgl-jsgl-tjjs" ],
"disabledAlias": [ "glygl-tjgly", "glygl-glylb" ]
}
}
js解析：
$.ajax({
url: url,
dataType: 'json',
success: function(res){
// 支持自定义递归字段、数组权限判断等
// 深坑注意：如果API返回的数据是字符串，那么 startPid 的数据类型也需要是字符串
var trees = authtree.listConvert(res.data.list, {
primaryKey: 'alias'
,startPid: '0'
,parentKey: 'palias'
,nameKey: 'name'
,valueKey: 'alias'
,checkedKey: res.data.checkedAlias//控制是否选中，checkedAlias是json中的数据
,disabledKey: res.data.disabledAlias//控制是否可以获得，disabledAlias是json中的数据
});
layui.code({
});
// 如果页面中多个树共存，需要注意 layfilter 需要不一样
authtree.render('#LAY-auth-tree-convert-index', trees, {
inputname: 'authids[]',
layfilter: 'lay-check-convert-auth',
// openall: true,
autowidth: true,
});
},
error: function(xml, errstr, err) {
layer.alert(errstr+'，获取样例数据失败，请检查是否部署在本地服务器中！');
}
});效果与上相同：