QingHuaiBuShuai 2022-05-06 15:11 采纳率: 69.7%
浏览 60
已结题

layui多选框alert提示框灰屏

问题遇到的现象和发生背景

需求是: 多选框选数,点击按钮,判断选中的行数,如果大于50行就弹出提示框:"最多选中50行"!
但是选中60行的时候,点击按钮,会灰屏,没有显示任何提示,也无法进行操作,控制台也没报错。
如果把限制条件改为10就可以正常使用。

img

问题相关代码,请勿粘贴截图
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>四级管理人员</title>
    <link type="text/css" rel="stylesheet" href="${ctx_root}/resources/js/layui.2.6.8/css/layui.css"/>
    <script type="text/javascript" charset="utf-8" src="${ctx_root}/resource/ui/js/jquery.js"></script>
    <script type="text/javascript" charset="utf-8" src="${ctx_root}/resources/js/layui.2.6.8/layui.js"></script>
    <script src="${ctx_root}/resources/js/cadre/js/icontains.js" type="text/javascript"></script>
    <script src="${ctx_root}/resources/js/cadre/js/comboTreePlugin.js" type="text/javascript"></script>
    <link rel="stylesheet" href="${ctx_root}/resources/js/cadre/css/style.css">
    <style type="text/css">
        .layui-table-page .layui-laypage-curr .layui-laypage-em {
            border-color: #D8000F !important;
            background-color: #D8000F !important;
        }

        .layui-form-select dl dd.layui-this {
            background-color: #D8000F !important;
        }

        .layui-form-label {
            width: 75px !important;
        }

        .ComboTreeItemParent .layui-form-checkbox {
            display: none;
        }

        .ComboTreeItemParent input[type='checkbox'] {
            display: inline;
        }

        .layui-form-checkbox {
            top: 4px !important;
        }

        .layui-form-item .layui-input-inline {
            width: 130px;
        }
    </style>
</head>
<body>
<div class="layui-fluid page larry-wrapper" style="background-color:#fff;">
    <p>&nbsp;</p>
    <form class="layui-form" action="" style="width:98%;margin: auto;" id="queryForm">
        <div class="layui-row rowZ" style="background-color:rgba(255, 240, 240, 0.349019607843137);">
            <p>&nbsp;</p>
            <div class="layui-form-item " style="margin-bottom:15px;">
                <div style="margin-top:15px;">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: auto">员工编号</label>
                        <div class="layui-input-inline">
                            <input type="text" id="employeeNumber" name="employeeNumber" class="layui-input"
                                   placeholder="请输入">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: auto">员工姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" id="lastName" name="lastName" class="layui-input" placeholder="请输入">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: auto">正副职标记</label>
                        <div class="layui-input-inline layui-form">
                            <select name="zfPositionFlag" lay-filter="zfPositionFlag" id="zfPositionFlag">
                                <option value=""></option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: auto">年龄区间</label>
                        <div class="layui-input-inline">
                            <input type="number" name="ageStart" placeholder="请输入" class="layui-input" id="ageStart">
                        </div>
                        <div class="layui-form-mid">~</div>
                        <div class="layui-input-inline">
                            <input type="number" name="ageEnd" placeholder="请输入" class="layui-input" id="ageEnd">
                        </div>
                    </div>
                </div>
                <div style="margin-top:10px;">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: 90px">性别</label>
                        <div class="layui-input-inline layui-form">
                            <select name="psex" lay-filter="sex" id="psex">
                                <option value=""></option>
                                <option value="男"></option>
                                <option value="女"></option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: auto">最高学历</label>
                        <div class="layui-input-inline layui-form">
                            <select name="topDegree" lay-filter="topDegree" id="topDegree">
                                <option value=""></option>
                                <option value="研究生及以上">研究生及以上</option>
                                <option value="大学本科">大学本科</option>
                                <option value="大学专科">大学专科</option>
                                <option value="高中及以下">高中及以下</option>
                            </select>
                        </div>
                    </div>


                    <div class="search-btn-right"
                         style="float: right;margin-right:50px;margin-top:0px;margin-bottom:10px;">
                        <button class="layui-btn layui-btn-primary" style="background-color: red;color: white;"
                                lay-submit id="searchBtn" lay-filter="search">&nbsp;&nbsp;</button>
                        <a class="layui-btn layui-btn-primary" style="background-color: white;" onclick="resetSearch()">&nbsp;&nbsp;</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row search-btn">
            <div class="search-btn-left layui-col-md4">
                <a class="layui-btn layui-btn-primary" id="exportConfig" onclick="exportConfig();"
                   style="background-color: red;color: white;margin-left: 0px">+导出</a>
            </div>
        </div>
    </form>
    <div class="table-box">
        <table class="layui-hide" id="test" lay-filter="test"></table>
        <div id="page"></div>
    </div>
</div>
</body>

</script>

<script type="text/javascript">
    $(document).ready(function () {

        let serach = {
            employeeNumber: '',
            lastName: '',
            psex: '',
            zfPositionFlag: '',
            ageStart: '',
            ageEnd: '',
            topDegree: '',
            //justAnInputBox: ''
        }
        layui.use(['layer', 'form', 'table', 'laypage', 'layer'], function () {
            var layer = layui.layer
                , form = layui.form
                , table = layui.table
                , laypage = layui.laypage
                , layer = layui.layer
                , ctx = top.global.ctx

            // 设置全局变量以保存选中行信息(仅需要id的话在你的业务位置调用ids即可,数据格式是int数组)
            let ids = new Array();

            // 存储所有选中的数据(需要行内全量数据在你的业务位置调用lists即可,数据格式是对象集合)
            var lists = new Array();

            // 保存当前页全部数据id,点击全选时使用
            let tableIds = new Array();

            //查询
            form.on('submit(search)', function (data) {
                serach.employeeNumber = data.field.employeeNumber
                serach.lastName = data.field.lastName
                serach.psex = data.field.psex
                serach.zfPositionFlag = data.field.zfPositionFlag
                serach.ageStart = data.field.ageStart
                serach.ageEnd = data.field.ageEnd
                serach.topDegree = data.field.topDegree
                //serach.justAnInputBox = data.field.justAnInputBox
                table.reload('test', {
                    where: serach,
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                });
                return false;
            });


            //渲染表格
            table.render({
                elem: '#test',
                url: '${ctx}/cadre/HeadOfficeOfCity/list',
                text: {
                    none: '暂无相关数据' //默认:无数据。
                },
                method: 'POST',
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": '', //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": res.data //解析数据列表
                    };
                },
                page: true,
                cols: [[
                    {
                        type: 'checkbox',
                        fixed: 'id',
                        width: "4%",
                        align: 'center'
                    }, {
                        field: 'allOrder',
                        title: '序号',
                        width: "5%",
                        align: 'center',
                        type: 'numbers',
                        fixed: 'left'
                    }, {
                        field: 'orgOrder',
                        title: '单位内排序',
                        width: "8%",
                        align: 'center',
                        fixed: 'left'
                    }, {
                        field: 'cityName',
                        title: '市公司',
                        width: "9%",
                        align: 'center',
                        fixed: 'left'
                    }, {
                        field: 'companyName',
                        title: '单位',
                        width: "9%",
                        align: 'center',
                        fixed: 'left'
                    }, {
                        field: 'zfPositionFlag',
                        title: '正副职标记',
                        width: "8%",
                        align: 'center',
                        fixed: 'left'
                    }, {
                        field: 'lastName',
                        title: '姓名',
                        width: "6%",
                        align: 'center',
                        fixed: 'left'
                    }, {
                        field: 'employeeNumber',
                        title: '员工编号',
                        width: "8%",
                        align: 'center',
                        fixed: 'left'
                    }, {
                        field: 'currentPosition',
                        title: '现任职务',
                        width: "7%",
                        align: 'center',
                        fixed: 'left'
                    }, {
                        field: 'age',
                        title: '年龄',
                        width: "5%",
                        align: 'center',
                        fixed: 'left'
                    }, {
                        field: 'psex',
                        title: '性别',
                        width: "5%",
                        align: 'center'
                    }, {
                        field: 'dateOfBirth',
                        title: '出生年月',
                        width: "8%",
                        align: 'center'
                    }, {
                        field: 'workStartDate',
                        title: '工作时间',
                        width: "7%",
                        align: 'center'
                    }, {
                        field: 'joinPartyDate',
                        title: '入党时间',
                        width: "7%",
                        align: 'center'
                    },  {
                        field: 'aveAge',
                        title: '平均年龄',
                        width: "14%",
                        align: 'center'
                    }, {fixed: 'right', title: '操作', width: '140', align: 'center', toolbar: '#operate'}]],

            });


            //工具条事件
            table.on('tool(test)', function (obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var personId = data.personId;
                var uuid = data.uuid;
                var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)

                if (layEvent === 'edit') {
                    window.location.href = '${ctx}/cadre/HeadOfficeOfCity/viewPage?personId=' + personId;
                } else if (layEvent === 'approve') {
                    if ("" == uuid || null == uuid) {
                        layer.alert("请先在【信息管理】模块维护此人员档案信息。");
                        return;
                    } else {
                        window.location.href = ctx + '/downResume/down?uuid=' + uuid + '&flag=appointment';
                    }
                }
            });


            window.resetSearch = function () {
                $("#employeeNumber").val('');
                $("#lastName").val('');
                $("#psex").val('');
                $("#zfPositionFlag").val('');
                $("#ageStart").val('');
                $("#ageEnd").val('');
                $("#topDegree").val('');
                form.render();
                $("#searchBtn").click();
            }

        });

    })

</script>

<script type="text/html" id="operate">
    <a class="layui-btn layui-btn-danger layui-btn-xs" style="background-color: #D8000F;color: white;" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" style="background-color: #D8000F;color: white;"
       lay-event="approve">审批表</a>
</script>
<script type="text/javascript">


    function exportConfig() {
        debugger;
        var $ = layui.jquery;
        var ctx = top.global.ctx;
        var table = layui.table;
        var layer = layui.layer;
        var data = table.checkStatus('test').data;
        var arr_bow = [];
        var arr_bow1 = [];
        if (data.length <= 0) {
            layer.alert("请选择需要导出的人员!");
            return ;
        }
        if (data.length > 50) {
            layer.msg("选择人数不能大于50,请重新选择。");
            return ;
        }

        for (var i = 0; i < data.length; i++) {
            if ("" == data[i].uuid || null == data[i].uuid) {
                arr_bow1.push(data[i].employeeNumber);
            } else {
                arr_bow.push(data[i].uuid);
            }

        }

        if (arr_bow.length > 0) {
            arr_bow = JSON.stringify(arr_bow);
            var url1 = ctx + '/downResume/downStaffZip?data=' + encodeURI(arr_bow) + '&tag=' + '2';
            var form = $('<form method="POST" action="' + url1 + '">');
            $('body').append(form);
            form.submit(); //自动提交
        }
        if (arr_bow1.length > 0) {
            arr_bow1 = JSON.stringify(arr_bow1);
            layer.alert("员工编号为" + arr_bow1 + "的人员未维护信息,请在【信息管理】模块维护。");
            return false;
        }

    }

</script>

</html>
运行结果及报错内容

img


判断完之后就灰屏

  • 写回答

1条回答

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

      • 系统已结题 5月15日
      • 已采纳回答 5月7日
      • 修改了问题 5月6日
      • 修改了问题 5月6日
      • 展开全部

      悬赏问题

      • ¥20 二阶矩阵对角化和弹力平衡运动方程问题求解
      • ¥15 multisim10安装后,找不到NI License Manager的程序来安装许可证
      • ¥15 C++银行卡系统 Help!
      • ¥15 JS如何把上面这种数据类型转换成下面这种的
      • ¥15 ubuntu 16.04.2 oss上传文件并显示耗时
      • ¥15 存储过程调用没有进行逻辑计算
      • ¥20 Kali破解WIFI密码中出现这个问题是什么意思
      • ¥15 R语言数据分析的相关问题
      • ¥15 模型导入SP后贴图纹理只有一个,拆了四张UV的,怎么解决?
      • ¥15 检索带order by 非常慢