从零开始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 的规则无法渲染多选框
<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">选择权限</label>
        <div class="layui-input-block">
            <div id="LAY-auth-tree-index"></div>
        </div>
    </div>
</form>

第二步：下载源码并引入插件   下载

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：

<form class="layui-form" action="">
            <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>
        </form>

注意到<div id="LAY-auth-tree-convert-index"></div>中权限树的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+'，获取样例数据失败，请检查是否部署在本地服务器中！');
	}
});

 效果与上相同：