{layout name="manager/layout" /} <link rel="stylesheet" href="__STATIC__/js/zTree/metroStyle/metroStyle.css"> <div class="layui-row layui-col-space15"> <div class="layui-col-xs12 layui-col-md3"> <div id="echarts-pies" style="background-color:#ffffff;overflow:scroll;padding: 20px"> <div class="layui-card"> <div class="layui-card-header">配置分组</div> <div class="layui-card-body"> <input type="hidden" id="ids-data" name="ids"> <ul id="group-tree" data-tree="{$categoryJson ?? ''}" class="ztree"></ul> </div> </div> </div> </div> <div class="layui-col-xs12 layui-col-md9"> <div id="echarts-records" style="background-color:#ffffff;min-height:600px;"> <div class="layuimini-container location-index-page"> <div class="layuimini-main"> <fieldset class="table-search-fieldset" style="display: none"> <legend>搜索信息</legend> <div style="margin: 10px 10px 10px 10px"> <form class="layui-form layui-form-pane" action=""> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">标题</label> <div class="layui-input-inline"> <input type="text" name="title" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">描述</label> <div class="layui-input-inline"> <input type="text" name="description" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button> </div> </div> </form> </div> </fieldset> <div> <table id="table-container" class="layui-table" data-url="/manager/config-item" lay-filter="table-container"></table> </div> </div> </div> </div> </div> </div> <!-- 隐藏列 --> <!-- 编辑单元格提交url --> <input type="hidden" id="row-modify" data-url="/manager/config-item/modify"> <!-- 列-状态变更 --> <script type="text/html" id="row-status"> <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="正常|禁用" lay-filter="changeStatus" {{ d.status == 1 ? 'checked' : '' }}> </script> <!-- 操作列 --> <script type="text/html" id="row-operate"> <a class="layui-btn layui-btn-primary layui-btn-xs" data-href="/manager/config-item/edit.html?id={{d.id}}" data-title="编辑配置项" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" data-href="/manager/config-item/del.html" lay-event="del">删除</a> </script> <!-- toolbar --> <script type="text/html" id="toolbar-tpl"> <a class="layui-btn layui-btn-sm layui-btn-sm" data-table-refresh lay-event="refresh"><i class="fa fa-refresh"></i></a> <a class="layui-btn layui-btn-normal layui-btn-sm" data-href="/manager/config-item/add.html" data-title="添加配置项" lay-event="add"><i class="fa fa-plus"></i> 添加</a> <a class="layui-btn layui-btn-danger layui-btn-sm" data-href="/manager/config-item/del.html" lay-event="del"><i class="fa fa-trash-o"></i> 删除</a> </script> <script src="__MANAGER__/js/config_item.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" : "s", "N" : "ps" }, }, callback: { onCheck: getCheck }, data: { simpleData: { enable: true, idKey: 'id', pIdKey: 'pid', rootPId: 0 }, key: { name: 'title', } } }; // zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解) let zNodes = $('#group-tree').data('tree'); $(document).ready(function(){ // console.log(zNodes,'dd') zTreeObj = $.fn.zTree.init($("#group-tree"), setting, zNodes); }); function getCheck() { let nodes = zTreeObj.getCheckedNodes(true); let ids = []; $.each(nodes, function (index, val) { ids.push(val.name); }) $('#ids-data').val(ids); layui.use(['table'], function () { let table = layui.table; //执行搜索重载 table.reload('table-container', { page: {curr: 1} , where: {searchParams: {group: ids}} }, 'data'); }) } </script>