Jqgrid column order
I have a jqgrid that reads data from a json service
$('#list').jqGrid({
url: 'jsonservice',
datatype: 'json',
mtype: 'GET',
colNames: ['Id', 'Name', 'Street', 'City'],
colModel: [
{ name: 'Id', index: 'Id', width: 55, align: 'center', width: '25' }
{ name: 'Name', index: 'Name', width: 120 },
{ name: 'Street', index: 'Street', width: 90 },
{ name: 'City', index: 'City', width: 50 },
]
});
json service returns data like this
{"page":1,
"total":37,
"records":722,
"rows":
[
{"id":1,"cell":[1, "Sample name 1","Sample Street 2","Sample City 3"]},
{"id":2,"cell":[2, "Sample name 2","Sample Street 2","Sample City 3"]}
]
}
How can I change the order of the displayed columns eg. Name, City, Street, Id without reordering in json data?
source to share
Easiest way to use jsonReader on form
jsonReader: {repeatitems: false, id: "Id"}
In the case where the data representing strings should be objects with named properties:
{
"page": 1,
"total": 37,
"records": 722,
"rows": [
{"Id":1, "Name":"Sample name 1", "Street":"Sample Street 2", "City":"Sample City 3"},
{"Id":2, "Name":"Sample name 2", "Street":"Sample Street 2", "City":"Sample City 3"}
]
}
The main disadvantage of the format is the increase in the size of the transmitted data. However, this will be the easiest way to solve your problem.
Another way would be to use repeatitems: false
in combination with jsonmap
. This allows you to specify how the data for each column will be read from the data row. You can use dot names for jsonmap
:
$('#list').jqGrid({
url: 'Marcin.json',
datatype: 'json',
colNames: ['Name', 'Street', 'City', 'Id'],
colModel: [
{ name: 'Name', width: 120, jsonmap: "cell.1" },
{ name: 'Street', width: 190, jsonmap: "cell.2" },
{ name: 'City', width: 90, jsonmap: "cell.3" },
{ name: 'Id', width: 55, align: 'center', jsonmap: "cell.0" }
],
height: "auto",
gridview: true,
jsonReader: { repeatitems: false, id: "Id" }
});
The relevant demo looks like
In more complex cases, it can be used jsonmap
as a function that reads an item for a column from an object that represents a row. For example, you can rewrite the column definition 'Id'
to the following
{ name: 'Id', width: 55, align: 'center',
jsonmap: function (obj) { // "cell.0"
return obj.cell[0];
}}
The modified demo displays the same results.
source to share