问题遇到的现象和发生背景
需求是： 多选框选数，点击按钮，判断选中的行数，如果大于50行就弹出提示框:"最多选中50行"！
但是选中60行的时候，点击按钮，会灰屏，没有显示任何提示，也无法进行操作，控制台也没报错。
如果把限制条件改为10就可以正常使用。
问题相关代码，请勿粘贴截图
<%@ 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> </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> </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">查 询
</button>
<a class="layui-btn layui-btn-primary" style="background-color: white;" onclick="resetSearch()">清 空</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>
运行结果及报错内容
判断完之后就灰屏
