一个奇葩问题：datagrid数据集为0时页面死循环访问actionurl

heefox · 发表于 2017-9-26 09:56:50

今天碰到一个奇葩问题，当datagrid的数据集为0时，页面死循环访问actionurl.
前端代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<t:base type="jquery,easyui,tools,DatePicker"></t:base>

<title>设备列表</title>
<script>
//操作按钮
function optFormatter(val, row, index)
{
if (row.state == 0 || isObjNull(row.state)) {
return "<button type='button' class='easyui-linkbutton' style='height:90%;background-color:#FF0000;' onclick='stopDevice(\""
+ row.id
+ "\",this)'>×停用设备</button><button type='button' class='easyui-linkbutton' style='height:90%;background-color:#0000FF;' onclick='openDoor(\""
+ row.id + "\",this)'>√远程开门</button>";
}
else {
return "<button type='button' class='easyui-linkbutton' style='height:90%;background-color:#00ff00;' onclick='reviewDevice(\"" + row.id
+ "\",this)'>√启用设备</button>";
}
}
//行风格
function rowStyler(index, row)
{
if (row.state == 1)
return "background-color:#FF0000;color:#ffffff;";
}
//查询记录
function queryByFilter()
{
$("#deviceList").datagrid("reload", { deviceName : $("#deviceName").val(), state : $("#cmbState").combobox("getValue") })
}
//停用设备
function stopDevice(id, obj)
{
confirmDo("确定要停用当前设备吗?", function()
{
obj.disabled = true;
var url = "deviceSettingController.do?doStop";
$.post(url, { id : id }, function(data)
{
obj.disabled = false;
if (data.msg == "success")
queryByFilter();
else
tip(data.msg);
}, "json");
});
}
//启用设备
function reviewDevice(id, obj)
{
confirmDo("确定要启用当前设备吗?", function()
{
obj.disabled = true;
var url = "deviceSettingController.do?doReview";
$.post(url, { id : id }, function(data)
{
obj.disabled = false;
if (data.msg == "success")
queryByFilter();
else
tip(data.msg);
}, "json");
});
}
//远程开门
function openDoor(id, obj)
{
confirmDo("确定要开启当前设备吗?", function()
{
obj.disabled = true;
var url = "deviceSettingController.do?doOpenDoor";
$.post(url, { id : id }, function(data)
{
obj.disabled = false;
if (data.msg == "success")
tip("设备已经打开！");
else
tip(data.msg);
}, "json");
});
}
</script>
</head>
<body>
<div class="easyui-layout" fit="true">
<div region="north" style="height: 40px; padding-top: 5px; border: none;">
<div style="float: left">
<span style="margin-left: 5px;">
<button class="easyui-linkbutton" icon="icon-add"
onclick="addTemp('添加设备','deviceSettingController.do?goAdd','deviceList', '880px', '400px')" id="btnAdd">录入</button>
</span> <span style="margin-left: 5px;">
<button class="easyui-linkbutton" icon="icon-edit"
onclick="updateTemp('更新设备','deviceSettingController.do?goUpdate','deviceList', '880px', '400px')" id="btnEdit">编辑</button>
</span> <span style="margin-left: 5px;">
<button class="easyui-linkbutton" icon="icon-search"
onclick="viewTemp('查看设备','deviceSettingController.do?goView', 'deviceList','880px', '400px')" id="btnView">查看</button>
</span>
</div>
<div name="divConditionQuery" style="float: right; padding-right: 10px; border: none;">
<span> 设备名称: <input class="easyui-textbox" id="deviceName" name="deviceName"
style="height: 26px; width: 180px;" /></span> <span>设备状态:<select class="easyui-combobox" style="height: 26px;"
id="cmbState"><option value="">全部</option>
<option value="0" selected="selected">正常设备</option>
<option value="1">停用设备</option></select></span>
<button href="#" class="easyui-linkbutton" iconCls="icon-search" id="btnQuery"
style="margin-right: 20px;">
<t:mutiLang langKey="common.query" />
</button>
</div>
</div>
<div region="center">
<t:datagrid name="deviceList" title="" actionUrl="deviceSettingController.do?datagrid&userId=${userId}" idField="id"
fit="true" pageSize="50" rowStyler="rowStyler" fitColumns="true">
<t:dgCol title="编号" field="id"></t:dgCol>
<t:dgCol title="设备名称" field="deviceName" width="100"></t:dgCol>
<t:dgCol title="设备地址" field="deviceAddress" width="120"></t:dgCol>
<t:dgCol title="坐标经度" field="latitude" width="80"></t:dgCol>
<t:dgCol title="坐标纬度" field="longtitude" width="80"></t:dgCol>
<t:dgCol title="状态" field="state" width="80" replace="正常_0,已禁用_1"></t:dgCol>
<t:dgCol title="操作" field="opt" width="100" align="center" formatterjs="optFormatter"></t:dgCol>
</t:datagrid>
</div>
</div>
</body>
</html>

后端代码：
@RequestMapping(params = "datagrid")
public void datagrid(HttpServletRequest request, HttpServletResponse response, DataGrid dataGrid)
{
String userId = request.getParameter("userId");
String state = request.getParameter("state");
String hql = " from DeviceSetting t where 1=1 and t.createBy.id='" + userId + "'";
Integer pageRows = dataGrid.getRows();
Integer pageNo = dataGrid.getPage();
String hqlFlt = "";
if (StringUtil.isNotEmpty(state))
{
hqlFlt += " and t.state=" + state;
}
List<DeviceSetting> deviceSettings = this.deviceSettingService.findObjsForHql(hql + hqlFlt, pageNo, pageRows);
Long ct = 0l;
ct = this.deviceSettingService.getCountForHql("select count(t.id) from DeviceSetting t where 1=1" + hqlFlt);
dataGrid.setResults(deviceSettings);
dataGrid.setTotal(ct.intValue());
TagUtil.datagrid(response, dataGrid);

}

heefox · 发表于 2017-9-26 11:21:14

自己解答吧,经调试JS发现：每次加载完成后，会执行加载成功函数，当数据集长度为0 的时候，要重新设置表格的当前页数，而设置当前页数，就要刷新页面，这样就又一次刷新了页面，如此循环了。
onLoadSuccess : function(data)
{
debugger;
$("#deviceList").datagrid("clearSelections");
$(this).datagrid("fixRownumber");
if (!false) {
if (data.total && data.rows.length == 0) {
var grid = $('#deviceList');
// grid.datagrid({ pageNumber : 1 });

/ar curr = grid.datagrid('getPager').data("pagination").options.pageNumber;
//grid.datagrid({ pageNumber : (curr - 1) });
}
}

heefox · 发表于 2017-9-26 13:00:30

根本问题在于查询的记录集是0，但是在datagrid.setTotal(ct)这个CT的值是2，导致逻辑错误。即记录集是0长度，但是设置的数量却是2，所以导致死循环了。