## layuiadmin iframe 2020版 引入 authtree 組件 + 第一步：為權限樹提供容器 + 第二步：下載源碼并引入插件 + 第三步：異步獲取權限數據并渲染 >[danger] 第一步：為權限樹提供容器 + 權限樹容器：`id="LAY-auth-tree-index"` + 容器需要包含在 `form.layui-form > div.layui-form-item > div.layui-input-block`，否則無法渲染多選框 ```html <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">角色名稱</label> <div class="layui-input-block"> <input class="layui-input" type="text" name="name" placeholder="請輸入角色名稱" /> </div> </div> <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> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" type="submit" lay-submit lay-filter="LAY-auth-tree-submit">提交</button> <button class="layui-btn layui-btn-primary" type="reset">重置</button> </div> </div> </form> ``` >[danger] 第二步：下載源碼并引入插件 + 配置擴展目錄的模板輸出替換 `__LAYUIADMIN_EXTEND__` ``` // 模板輸出字符串替換 'tpl_replace_string' => [ // layuiadmin 靜態資源 '__LAYUIADMIN__' => '/static/layuiadmin', // authtree 權限樹擴展組件 '__AUTHTREE__' => '/static/layuiadmin/lib/extend/authtree', ], ``` + 將 `layui_exts` 目錄拷貝到 extend 目錄下并重命名為 `authtree`  + 加載 `authtree` 組件  >[danger] 第三步：異步獲取權限數據并渲染 ``` $.ajax({ url: 'tree.json', dataType: 'json', success: function(data){ var trees = data.data.trees; // #LAY-auth-tree-index 權限樹容器 authtree.render('#LAY-auth-tree-index', trees, { inputname: 'authids[]', layfilter: 'lay-check-auth', autowidth: true, }); } }); ``` >[danger] 效果示例