<link rel="stylesheet" href="{{assert adminbase/adminlte/js/ztree/zTreeStyle/zTreeStyle.css}}"/>


<div style="width: 500px; min-height:500px;">
    <ul class="ztree" id="acl_list">

    </ul>
</div>
<form role="form"  class="data_forum">
    <input type="hidden" name="ids" id="acl_user_ids" />
    <input type="hidden" name="id" value="{{$item.id}}" />
</form>

<script src="{{assert adminbase/adminlte/js/ztree/jquery.ztree.all-3.5.min.js}}"></script>
<script type="text/javascript">
    require(['jquery'], function() {
        function getCheckedNodes(e, treeId, treeNode) {
            var nodes = zTreeObj.getCheckedNodes(true);
            var aclid = '';
            for(var index in nodes) {
                if (nodes.hasOwnProperty(index)) {
                    aclid = aclid + nodes[index].id + ','
                }
            }

            $("#acl_user_ids").val(aclid);
        }

        var setting = {
            check: {
                enable: true,
                chkboxType : { "Y" : "s", "N" : "ps"}
            },
            data: {
                key: {
                    name: "title"
                },
                simpleData: {
                    enable: true,
                    pIdKey: "pid"
                }
            },
            callback: {
                onCheck: getCheckedNodes
            }
        };

        var zNodes = {{echo json_encode($menus)}};

        zTreeObj = $.fn.zTree.init($("#acl_list"), setting, zNodes);
    });

</script>