单击排序列时，jqGrid客户端数据将消失
单击排序列时，jqGrid客户端数据将消失
提问于 2011-11-10 02:26:22
我有一个jqGrid，如果我单击标题进行排序，我所有的网格数据都会消失，我不知道为什么会发生这种情况。这是我做的sample page，重现了问题所在。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Disappearing Sort Repro</title>
<link type="text/css" rel="Stylesheet" href="js/jQuery/plugins/jqGrid4/ui.jqgrid.css" />
</head>
<body>
<table id="ooTruckGrid">
</table>
<div id="ooTruckPager">
</div>
<script language="javascript" type="text/javascript" src="js/jquery/jquery-1.6.2.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery/jquery-ui.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery/plugins/jqGrid4/grid.locale-en.js"></script>
<script language="javascript" type="text/javascript" src="js/jQuery/plugins/jqGrid4/jquery.jqGrid.js"></script>
<script language="javascript" type="text/javascript">
_truckList = [];
$(document).ready(function () {
$("#ooTruckGrid").jqGrid({
datatype: "clientSide",
colNames: ['id', 'VIN', 'Plate', 'Make', 'Model', 'Year', 'RFID #', 'Description'],
colModel: [
{ name: 'id', index: 'id', hidden: true, sorttype: "int" },
{ name: 'vin', index: 'vin', width: 120, sorttype: "text" },
{ name: 'plate', index: 'plate', width: 75, sorttype: "text" },
{ name: 'make', index: 'make', width: 80, sorttype: "text" },
{ name: 'model', index: 'model', width: 80, sorttype: "text" },
{ name: 'year', index: 'year', width: 40, sorttype: "int" },
{ name: 'rfidNo', index: 'rfidNo', width: 50, sorttype: "text" },
{ name: 'description', index: 'description', width: 100, sortable: false }
],
datatype: 'local',
hidegrid: false,
jsonReader: {
repeatitems: false
},
loadonce: true,
multiselect: true,
pgbuttons: false,
pginput: false,
rowNum: '',
pager: '#ooTruckPager',
sortable: false,
viewrecords: true
});
// Add truck
addTruckData(-1, 0, "11111111111111111", "Make 1", "Model 1-1", "2009", "US", "WA", "1D1D1D", "", "Test truck 1");
addTruckData(-1, 0, "22222222222222222", "Make 2", "Model 2-1", "2010", "US", "WA", "2A2A2A", "11111", "Test truck 2");
addTruckData(-1, 0, "33333333333333333", "Make 2", "Model 2-2", "2011", "US", "WA", "3B3B3B", "", "Test truck 3");
addTruckData(-1, 0, "44444444444444444", "Make 1", "Model 1-2", "2006", "US", "WA", "4C4C4C", "22222", "Test truck 4");
addTruckData(-1, 0, "55555555555555555", "Make 3", "Model 3-1", "2003", "US", "WA", "5E5E5E", "", "Test truck 5");
});
function addTruckData(rowId, id, vin, make, model, year, country, state,
plate, rfid, description) {
var rowId = -1;
var method = '';
var truck = new truckData(-1, // rowId
id, vin, make, model, year, country,
state, plate, rfid, description);
if (_truckList.length > 0) {
for (var xx = 0; xx < _truckList.length; xx++) {
if (_truckList[xx].vin == vin) {
// The vin is already in the list, update it.
rowId = _truckList[xx].rowId;
break;
}
}
}
if (rowId == -1 && _truckList.length == 0) {
_truckList = [truck];
rowId = 0;
method = 'addRowData';
}
else if (rowId == -1) {
rowId = _truckList.length;
_truckList.push(truck);
method = 'addRowData';
}
else {
_truckList[rowId] = truck;
method = 'setRowData';
}
truck.rowId = rowId;
result = $('#ooTruckGrid').jqGrid(method, rowId, truck.toJqGridData());
}
function truckData(rowId, truckId, vin, make, model, year, country, state, plateNum, description, rfid, truckType) {
return {
rowId: rowId,
id: truckId,
vin: $.trim(vin),
make: make,
model: model,
year: year,
plateCountry: country,
plateState: state,
plateNumber: $.trim(plateNum),
description: $.trim(description),
rfid: $.trim(rfid),
truckType: truckType,
toJqGridData: function () {
return { "id": this.id, 'action': '', 'vin': this.vin,
'plate': this.plateCountry + '-' + this.plateState + '-' +
this.plateNumber, 'make': this.make, 'model': this.model,
'year': this.year, 'rfidNo': this.rfid,
'description': this.description
};
}
};
}
</script>
</body>
</html>如果您转到该链接，然后单击其中一个标题，则所有数据都会消失，而不是对网格进行排序。
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-11-10 07:11:40
导致列排序时数据消失的错误是选项rowNum: ''。如果不需要数据分页，那么应该为rowNum设置一些足够大的值，比如rowNum: 10000。这样的改变将会解决你的主要问题。
你的代码还有很多其他的小错误或者写得不好的部分，我想提一下：
- 您的测试页面不包含
jquery-ui.css，这一点非常重要。另一方面，您还包含了jqGrid不需要的jquery-ui.js。只有当您使用某个包含rowId参数jQuery UI functionality. - The
addTruckDatafunction，但您定义了具有相同名称的局部变量并在稍后的代码中赋值为var rowId = -1时，才应该包含它。这当然是错误的。 - 你应该在页眉中包含
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />。 - 你应该删除你想要拥有正确的XHTML1.0过渡页的
<script>. - If的不推荐使用的
language="javascript"属性。你应该在<table>元素中包含一个空的单元格<tr><td/></tr>。在jqGrid initialization. - You期间，将在JavaScript代码中使用
<和&字符删除空单元格。因此，要获得正确的XHTML代码，您应该修改代码，或者只在脚本开头包含//<![CDATA[行，在脚本末尾包含//]]>行。 - 您应该遵循类的JavaScript标准，并将函数
truckData删除为TruckData。 - ，您应该尽可能使用较少的全局变量和全局函数。例如，像变量
_truckList(更好的truckList)这样的函数TruckData和addTruckData可以移到$(document).ready(function () {/*here*/}); - You内部，应该在使用变量之前定义变量。例如，您使用没有定义的
result。在本例中，result将被解释为全局变量，并将作为属性添加到windows对象中。 - 您可以在同一网格中使用
datatype: "clientSide"和datatype: 'local'。你应该删除datatype: "clientSide". - You应该删除
loadonce: true，因为在datatype: 'local'的情况下它没有意义，将被忽略。 - 你应该删除colModel的属性，这些属性是默认的，比如
sorttype: "text"，删除jqGrid options，这些属性也是默认的，比如sortable: false。另一方面，您可以考虑包含height: 'auto'参数。 - 我建议您使用JSLint来提高JavaScript代码的质量，并使用W3 validator来验证标记。
我修改了你的页面一次，以显示如何以上的变化可以做到。演示here没有JSLint或W3验证器错误。
Stack Overflow用户
发布于 2016-04-12 18:32:29
在jqgrid创建范围中添加以下行：
rowNum: 9007199254740992
这将为jqgrid中的行设置最大容量。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8069700
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号