jqgrid columns order -

jqgrid columns order -

i have jqgrid read info 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 }, ] });

the json service returns info 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 alter order of displayed columns e.g. name, city, street, id without changing order in json data?

the simple way utilize jsonreader in form

class="lang-js prettyprint-override">jsonreader: {repeatitems: false, id: "id"}

in case info represent rows should objects having named properties:

class="lang-js prettyprint-override">{ "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 format increasing of size of transferred data. nevertheless simple way solve problem.

another way usage of repeatitems: false in combination jsonmap. allows specify how info every column read row of data. 1 can utilize dotted names jsonmap:

class="lang-js prettyprint-override">$('#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 corresponding demo looks as

in more complex cases 1 can utilize jsonmap function read item column object represent row. illustration 1 can rewrite definition of column 'id' following

class="lang-js prettyprint-override">{ name: 'id', width: 55, align: 'center', jsonmap: function (obj) { // "cell.0" homecoming obj.cell[0]; }}

the modified demo display same results.

jqgrid