{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" : "s" } }, 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>