layui 扩展 authtree 无限级权限控制树

要实现的效果 ：

执行：
一：下载 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>

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;
        $.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>