# 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 ] } } ``` # html ``` <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> ``` ``` <script> layui.config({ base: '../../../layuiadmin/' //navbar组件js所在目录 }).extend({ index: 'lib/index' ,//主入口模块 }).use(['index','jquery', 'authtree', 'form', 'layer', 'code' ], function () { var $ = layui.jquery; var form = layui.form; var authtree = layui.authtree; var layer = layui.layer; var code = layui.code; $.ajax({ // url: url, url: "getAuthMenu", dataType: 'json', success: function(res){ console.log('加载数据', res); // 支持自定义递归字段、数组权限判断等 // 深坑注意：如果API返回的数据是字符串，那么 startPid 的数据类型也需要是字符串 var ids = []; var text = $('input[name="rules"]').val(); var checkedId = text.split(','); for(i=0;i<checkedId.length;i++){ var idss = Number(checkedId[i]); ids.push(idss); } // console.log('ids数据',ids); // console.log('text数据', text); // console.log('数据', checkedId); 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: ids//控制是否选中，checkedId是json中的数据 // ,disabledKey: res.data.disabledId//控制是否可以获得，disabledId是json中的数据 }); console.log('数据', trees); layui.code({ }); // 渲染时传入渲染目标ID，树形结构数据（具体结构看样例，checked表示默认选中），以及input表单的名字 authtree.render('#LAY-auth-tree-index', trees, { inputname: 'ids[]', // 监听权限树改变，获取节点信息使用 layfilter: 'lay-check-auth', // 监听权限树时使用 'theme': 'auth-skin-default', // css样式 // openall: true, // 展开所有节点 autowidth: true, formFilter: 'authtree-submit-form' // 注意！！！如果不与其他插件render冲突，这个选填 }); // 使用 authtree.on() 不会有冒泡延迟 authtree.on('change(lay-check-auth)', function(data) { console.log('监听 authtree 触发事件数据', data); // 获取所有节点 var all = authtree.getAll('#LAY-auth-tree-index'); // 获取所有已选中节点 var checked = authtree.getChecked('#LAY-auth-tree-index'); $('input[name="rules"]').val(checked); // 获取所有未选中节点 var notchecked = authtree.getNotChecked('#LAY-auth-tree-index'); // 获取选中的叶子节点 var leaf = authtree.getLeaf('#LAY-auth-tree-index'); // 获取最新选中 var lastChecked = authtree.getLastChecked('#LAY-auth-tree-index'); // 获取最新取消 var lastNotChecked = authtree.getLastNotChecked('#LAY-auth-tree-index'); console.log( 'all', all, "\n", 'checked', checked, "\n", 'notchecked', notchecked, "\n", 'leaf', leaf, "\n", 'lastChecked', lastChecked, "\n", 'lastNotChecked', lastNotChecked, "\n" ); }); authtree.on('deptChange(lay-check-auth)', function(data) { console.log('监听到显示层数改变', data); }); authtree.on('dblclick(lay-check-auth)', function(data) { console.log('监听到双击事件', data); }); }, }); //监听提交 form.on('submit(layuiadmin-app-form-submit)', function(data) { var field = data.field; //获取提交的字段 // var authids = authtree.getChecked('#LAY-auth-tree-index'); // $('input[name="rules"]').val(authids); // var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 //提交 Ajax 成功后，关闭当前弹层并重载表格 //$.ajax({}); parent.layui.table.reload('LAY-app-content-list'); //重载表格 parent.layer.close(index); //再执行关闭 }); }) </script> ``` 参考 https://blog.csdn.net/m0_37316673/article/details/89470573