Layui 表格重载多查询且接口不同

最新推荐文章于 2024-05-17 15:59:45 发布

我是小妖怪逍遥又自在

最新推荐文章于 2024-05-17 15:59:45 发布

阅读量1.2k

点赞数

分类专栏： layui 文章标签： layui

本文链接：https://blog.csdn.net/qq_29648689/article/details/83786720

版权

layui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>

我是小妖怪逍遥又自在

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
Layui 表格重载多查询且接口不同

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;角色权限设置&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, i
复制链接

扫一扫