<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>角色权限设置</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="/layui/css/layui.css"> <link rel="stylesheet" href="/css/scroll-bar.css"> <link rel="stylesheet" href="/css/sub-page.css"> <link rel="stylesheet" href="//at.alicdn.com/t/font_693759_dgsnpaj0hzk.css"> <link rel="stylesheet" href="/css/nprogress.css"> <style> #city_1 select{ height: 38px; line-height: 38px; border-width: 1px; border-style: solid; background-color: #fff; border-radius: 2px; border-color: #e4dddd; width: 192px; margin-right: 4px; } </style> </head> <body> <div class="ok-body"> <!--模糊搜索区域--> <div class="layui-row "> <div class="layui-form layui-col-md12 ok-search"> <input class="layui-input" placeholder="账号" autocomplete="off" id="username"> <input class="layui-input" placeholder="手机号" autocomplete="off" id="mdn" > <input class="layui-input" placeholder="真实姓名" autocomplete="off" id="realname"> <button class="layui-btn layui-btn-normal" data-type="reload"> 精确查询 </button> </div> </div> <div class="layui-form-item layui-form" style="margin-top:20px"> <div class="layui-input-inline"> <select name="interest" lay-filter="aihao" placeholder="用户角色" id="roleld"> <option value="1">集团管理员</option> <option value="2">省级管理员</option> <option value="3">市级管理员</option> <option value="4">待定</option> </select> </div> <div class="layui-input-inline" id="city_1" style="width:auto"> <select class="prov"id="province" placeholder="所属省份" lay-ignore></select> <select class="city" id="city" placeholder="所属地市" lay-ignore></select> </div> <button class="layui-btn layui-btn-normal" data-type="reload1" id="batch"> 批量查询 </button> </div> <div class="layui-row"> <button data-method="offset" class="layui-btn layui-btn-normal" type="button" id="addRole">角色权限设置</button> </div> <!--数据表格--> <div class="tablebox tableOne" > <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table> </div> <!--数据表格--> <div class="tablebox tableTwo" style="display:none"> <table class="layui-hide" id="tableSr" lay-filter="tableRoles" ></table> </div> </div> <!--js逻辑--> <script type="text/javascript" src="/layui/layui.js"></script> <script src="/js/nprogress.js"></script> <script src="/js/jquery-2.1.0.js"></script> <script src="/js/jquery.cityselect.js"></script> <script> NProgress.start(); window.onload = function () { NProgress.done(); } layui.use(['element', 'table', 'form', 'jquery', 'laydate'], function () { var element = layui.element; var table = layui.table; var form = layui.form; var $ = layui.jquery; table.render({ elem: '#tableId', url: '/role/findRoles', limit: 10, page: true, height:480, cols: [ [ {type: 'checkbox'}, {field: 'userName', title: '账号', width: 150, sort: true}, {field: 'userPhone', title: '注册手机号', width: 150}, {field: 'userEmail', title: '注册邮箱号', width: 150}, {field: 'role', title: '角色', width: 100}, {field: 'userProvince', title: '所属省份', width: 150}, {field: 'userCity', title: '所属地市', width: 150}, {title: '操作', width: 80, templet: '#operationTpl', align: 'center'} ] ], done: function (res, curr, count) { $("#countNum").text(count); } }); table.render({ elem: '#tableSr', limit: 10, page: true, height:480, cols: [ [ {type: 'checkbox'}, {field: 'userName', title: '账号', width: 150, sort: true}, {field: 'userPhone', title: '注册手机号', width: 150}, {field: 'userEmail', title: '注册邮箱号', width: 150}, {field: 'role', title: '角色', width: 100}, {field: 'userProvince', title: '所属省份', width: 150}, {field: 'userCity', title: '所属地市', width: 150}, {title: '操作', width: 80, templet: '#operationTpl', align: 'center'} ] ], done: function (res, curr, count) { $("#countNum").text(count); } }); //精确查询 (function(){ var $ = layui.$, active = { reload: function(){ var userName = $('#username').val(); var userMdn = $('#mdn').val(); var realName = $('#realname').val(); table.reload('tableId', { where:{ username:userName, mdn:userMdn, realname:realName } }); }, }; $('.ok-search .layui-btn').on('click', function(){ $(".tableOne").addClass("show"); $(".tableTwo").addClass("hide"); var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); })(); (function(){ var $ = layui.$, active = { reload1: function(){ var roleId = $('#roleld').val(); var userProvince = $('#province').val(); var realCity = $('#city').val(); table.reload('tableSr', { url: '/role/searchRoles', where:{ roleId:roleId, province:userProvince, city:realCity } }); } }; $('#batch').on('click', function(){ $(".tableOne").addClass("hide"); $(".tableTwo").addClass("show"); var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); })(); //用户角色审批 table.on('tool(tableFilter)', function (obj) { var data = obj.data; var layEvent = obj.event; if (layEvent === 'edit') { json = JSON.stringify(data); layer.open({ title: '用户角色审批', type: 2, shade: false, maxmin: true, shade: 0.5, area: ['50%', '90%'], content: 'roleEdit', zIndex: layer.zIndex, success : function(layero, index){ var body = layui.layer.getChildFrame('body', index); }, end: function () { $(".layui-laypage-btn")[0].click(); } }); } }); //角色权限编辑 $("#addRole").click(function () { layer.open({ title: '角色权限编辑', type: 2, shade: false, maxmin: true, shade: 0.5, anim: 4, area: ['50%', '90%'], content: 'roleAdd', zIndex: layer.zIndex, end: function () { $(".layui-laypage-btn")[0].click(); } }); }) //省市 $(function() { $("#city_1").citySelect({ nodata: "none", required: false }); }); }) </script> <!--模板--> <script type="text/html" id="operationTpl"> <a href="javascript:;" title="用户角色审批" lay-event="edit"><i class="iconfont icon-jiaoseshouquan"></i></a> </script> </body> </html>
Layui 表格重载 多查询 且接口不同
猜你喜欢
转载自blog.csdn.net/qq_29648689/article/details/83786720
今日推荐
周排行