1
我有一个jqGrid，如果点击标题进行排序，我的所有网格数据都会消失，我不知道为什么会发生这种情况。这是一个sample page我制作了repro的问题。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>
如果转到该链接，然后单击其中一个标题，则所有数据消失而不是排序网格。