我有一个jqGrid,如果我点击标题进行排序,我的所有网格数据都会消失,我不知道它为什么会发生.这是我编写的示例页面,重现问题.
<!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>
如果您转到该链接,然后单击其中一个标题,则所有数据都将消失,而不是对网格进行排序.
可以选择在列排序中产生数据消失的错误rowNum: ''.如果你不需要的数据呼叫,你应该设置一些较大足够的价值rowNum一样rowNum: 10000.这种改变将解决您的主要问题.
您的代码还有许多其他小错误或错误的书面部分,我想提一下:
jquery-ui.css哪些非常重要.另一方面,你包括jquery-ui.jsjqGrid不需要的东西.只有在使用某些jQuery UI功能时才应包含它.addTruckData函数包含rowId参数,但您可以使用相同的名称定义局部变量,并var rowId = -1在代码中稍后指定该值.这当然是错的.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />在页眉中.language="javascript"属性<script>.<tr><td/></tr>在<table>元素中包含一个空单元格.在jqGrid初始化期间将删除空单元格.<和&字符.因此,要获得正确的XHTML代码,您应该修改代码,或者只//<![CDATA[在脚本开头包含行,并在行//]]>结束时包含行.truckData来TruckData.TruckData和addTruckData变量_truckList(更好truckList)可以在里面移动$(document).ready(function () {/*here*/});result没有定义的情况下使用.在这种情况下,result将被解释为全局变量,并将作为属性添加到windows对象.datatype: "clientSide"和datatype: 'local'.你应该删除datatype: "clientSide".loadonce: true因为datatype: 'local'它没有任何意义,将被忽略.sorttype: "text"并删除jqGrid选项,这些选项也是默认选项sortable: false.另一方面,您可以考虑包含height: 'auto'参数.我修改了您的页面一次,以显示如何进行上述更改.这里的演示没有JSLint或W3验证器错误.