# 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