Js 之layui-authtree權限樹

一、效果圖

 

 二、使用示例

1、html代碼

<div class="layui-form-item layui-form-text">
    <label class="layui-form-label">授權菜單：</label>
    <div class="layui-input-block">
        <div id="tree"></div>
     </div>
</div>    

2、js代碼

<script src="__PUBLIC__/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.config({
        base: '__PUBLIC__/layui/lay/modules/',
    }).extend({
        authtree: 'authtree',
    });
</script>
<script>
    layui.use(['form', 'element', 'authtree'], function() {
        let form = layui.form;
        let authtree = layui.authtree;
        form.render();
        authtree.render('#tree', {$tree}, {
            inputname: 'post[auth][]',
            layfilter: 'lay-check-auth',
            autowidth: true,
            openall: true,
            childKey: 'children',
            theme: 'auth-skin-default',
            themePath: '__PUBLIC__/layui/lay/themes/' // 主題路徑，默認 layui_exts/tree_themes/
        });
    });
</script>

三、demo地址

https://github.com/wangerzi/layui-authtree#已上線主題列表