colonnes jqGrid ordre

Question

Je jqGrid qui se lisent des données du service JSON

$('#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 }, 
    ] 
}); 

les données des retours de service JSON comme celui-ci

{"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"]} 
] 
} 

Comment changer l'ordre des colonnes à par exemple affichés Nom, Ville, Rue, Id sans changer l'ordre dans les données json?

Answer 1

La façon la plus simple à utiliser jsonReader sous la forme

jsonReader: {repeatitems: false, id: "Id"} 

Dans le cas où les données qui représentent les lignes doivent être des objets ayant des propriétés nommées:

{ 
    "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"} 
    ] 
} 

Le principal inconvénient du format est augmentation de la taille des données transférées. Néanmoins, ce sera la manière la plus simple de résoudre votre problème.

Une autre façon sera l'utilisation de repeatitems: false en combinaison avec jsonmap. Il permet de spécifier comment les données de chaque colonne seront lues à partir de la ligne de données. On peut utiliser des noms pointillées pour 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 corresponding demo semble que

Dans les cas plus complexes, on peut utiliser jsonmap en fonction qui se lit l'élément de la colonne de l'objet qui représentent la rangée. Par exemple, on peut réécrire la définition de la colonne 'Id' à ce qui suit

{ name: 'Id', width: 55, align: 'center', 
    jsonmap: function (obj) { // "cell.0" 
     return obj.cell[0]; 
    }} 

The modified demo afficher les mêmes résultats.