要实现的效果 :
执行:
一:下载 authtree.js 官网
二:把 authtree.js 放在 layuiadmin 文件下面
三:代码
主要的是接口的返回数据规则
其中: checkedId => 是选中状态(在角色修改权限的时候用到)
disabledId => 是不可选中的状态
{
"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 ]
}
}
(1.) 添加时 => html 代码段
<div class="layui-form-item">
<div class="layui-form-item" style="height:700px;">
<label class="layui-form-label">选择权限</label>
<div class="layui-input-block">
<div id="LAY-auth-tree-convert-index"></div>
</div>
</div>
</div>
js代码
<script>
layui.config({
base: '/static/layuiadmin/',//你存放authtree.js文件的位置
}).extend({
authtree: 'authtree',
});
layui.use(['jquery', 'authtree', 'code' ], function(){
var $ = layui.jquery;
var authtree = layui.authtree;
$.ajax({
url: '/admin/role/findaccess',
dataType: 'json',
success: function(res){
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中的数据
});
// 如果页面中多个树共存,需要注意 layfilter 需要不一样
authtree.render('#LAY-auth-tree-convert-index', trees, {
inputname: 'authids[]',
layfilter: 'lay-check-convert-auth',
openall: false,
autowidth: true,
});
},
});
});
</script>
(2.)修改时遇到的问题 => 需要获取 form 表单角色的信息,jq 代码如下:
<script>
layui.config({
base: '/static/layuiadmin/',//你存放authtree.js文件的位置
}).extend({
authtree: 'authtree',
});
layui.use(['jquery', 'authtree', 'code' ], function(){
var $ = layui.jquery;
var authtree = layui.authtree;
//获取表单信息,最主要是获取角色的 id ,在后台进行判断它的权限有哪些
var d = {};
var t = $('#recordListSearchForm [name]').serializeArray();
$.each(t, function() {
d[this.name] = this.value;
});
data = JSON.stringify(d);
$.post('/admin/role/update_findaccess', {'data': data}, function (res) {
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中的数据
});
// 如果页面中多个树共存,需要注意 layfilter 需要不一样
authtree.render('#LAY-auth-tree-convert-index', trees, {
inputname: 'authids[]',
layfilter: 'lay-check-convert-auth',
openall: false,
autowidth: true,
})
})
})
</script>