coupon-admin/view/manager/role/rule.html

{layout name="manager/layout" /}
<link rel="stylesheet" href="__STATIC__/js/zTree/metroStyle/metroStyle.css">

<div class="layuimini-container location-rule-page">
    <div class="layuimini-main">
        <div class="layui-form layuimini-form">
            <div class="layui-form-item">
                <label class="layui-form-label required">角色</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input layui-disabled" value="{$item.title ?? ''}">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">权限设置</label>
                <div class="layui-input-block">
                    <input type="hidden" id="ids-data" name="ids">
                    <ul id="auth-tree" data-auth="{$authJson ?? ''}" class="ztree"></ul>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" data-url="/manager/role/rule?id={$item.id}" lay-submit lay-filter="saveBtn">确认保存</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="__MANAGER__/js/role.js?v={:mt_rand()}"></script>
<script src="__STATIC__/js/jquery-3.3.1.js"></script>
<script src="__STATIC__/js/zTree/jquery.ztree.all.min.js"></script>
<script>
    let zTreeObj;
    let setting = {
        check: {
            enable: true,
            nocheckInherit: true,
            chkboxType: { "Y" : "ps", "N" : "ps" },
        },
        callback: {
            onClick: open,
            onCheck: getCheck
        },
        data: {
            simpleData: {
                enable: true,
                idKey: 'id',
                pIdKey: 'pid',
                rootPId: 0
            },
            key: {
                name: 'title',
            }
        }
    };
    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    let zNodes = $('#auth-tree').data('auth');

    $(document).ready(function(){
        zTreeObj = $.fn.zTree.init($("#auth-tree"), setting, zNodes);
        getCheck();
    });

    function open() {
        let nodes = zTreeObj.getSelectedNodes();
        if (nodes.length>0) {
            zTreeObj.expandNode(nodes[0], true, true, true);
        }
    }

    function getCheck() {
        let nodes = zTreeObj.getCheckedNodes(true);
        let ids = [];
        $.each(nodes, function (index, val) {
            ids.push(val.id);
        })
        $('#ids-data').val(ids);
    }
</script>