Mappage des données JSON dans JQGrid

Question

J'utilise jqGrid 3.6.4 et une jquery 1.4.2. Dans mon exemple je reçois suivant le format de données JSON & je veux cartographier ces données JSON en lignes d'une jqGrid

{ 
"page": "1", 
"total": 1, 
"records": "6", 
"rows": [ 
    { 
     "head": { 
      "student_name": "Mr S. Jack ", 
      "year": 2007 

     }, 
     "sub": [ 
      { 
       "course_description": "Math ", 
       "date": "22-04-2010", 
       "number": 1, 
       "time_of_add": "2:00", 
       "day": "today" 
      } 
     ] 

     } 
] 
} 

mon code jqGrid est comme suit

jQuery("#"+subgrid_table_id).jqGrid({ 
url:"http://localhost/stud/beta/web/GetStud.php?sid="+sid, 
dtatype: "json", 
colNames: ['Stud Name','Year','Date'.'Number'], 
colModel: [ {name:'Stud Name',index:'student_name', width:100, jsonmap:"student_name"}, 
{name:'Year',index:'year', width:100, jsonmap:"year"}, 
{name:'Date',index:'date', width:100, jsonmap:"date"}, 
{name:'Number',index:'number', width:100, jsonmap:"number"} 
], 
height:'100%', 
jsonReader: { repeatitems : false, root:"head" }, 
}); 

Alors maintenant, le problème est que mon data ie student_name et year sont sous "head", le jqgrid permet de localiser ces deux champs. en même temps, deux autres valeurs de colonne, à savoir Date et Nombre, se trouvent sous "sub" et même ces colonnes ne peuvent pas être mappées avec jqgrid

alors merci de bien vouloir m'aider à localiser ces attributs dans JQGrid.

Merci

Answer 1

tout d'abord le code affiché a des erreurs comme dtatype: "json" au lieu de datatype: "json". "},});" au lieu de "}});" à la fin du code et au lieu de colNames: ['Stud Name','Year','Date','Number']. Après avoir corrigé ces bogues clairs, vous devez modifier les valeurs jsonmap. C'était votre question principale. Le code fixe sera ressembler à ce qui suit:

jQuery("#"+subgrid_table_id).jqGrid({ 
    ... 
    datatype: 'json', 
    colNames: ['Stud Name','Year','Date'.'Number'], 
    colModel: [ 
     {name:'student_name', width:100, jsonmap:"head.student_name"}, 
     {name:'year', width:100, jsonmap:"head.year"}, 
     {name:'date', width:100, jsonmap:"sub.0.date"}, 
     {name:'number', width:100, jsonmap:"sub.0.number"} 
    ], 
    jsonReader: { repeatitems:false, root:"rows" } 
}); 

Vous devez fixer root à "rows" et utiliser jsonmap dans JSON notation par points (voir http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_dot_notation). J'utilise une notation un peu étrange comme "sub.0.number" parce que sub.0.number en JavaScript est le même que sub[0].number. Ça fonctionne maintenant.

Je vous recommande d'en dire un peu plus sur la structure des données JSON que vous recevez. (voir mes précédents commentaires à votre question): Est-ce que l'élément "sub" est vraiment un tableau avec toujours un élément ou que vous voulez utiliser des sous-réseaux? Probablement les données devraient être changées de sub:[{"":"", ...}] à sub:{"":"", ...}? Que voulez-vous utiliser comme un rowid? student_name? Ajoutez ensuite id: "head.student_name" à la définition jsonReader ou ajoutez la propriété key: true à la définition de la colonne student_name. Ou vous oubliez de l'inclure dans les données JSON?

Et la dernière suggestion. Si vous ouvrez http://trirand.com/blog/jqgrid/jqgrid.html et ouvre sur le côté gauche de l'arborescence la branche "Data Mapping" \ "Optimisation des données" vous verrez un exemple où on utilise uniquement le tableau au lieu des éléments nommés dans JSON. Ces données auront une taille minimale et pourront être transférées plus rapidement du serveur au client. Vous avez à la place quelques champs (comme "course_description") que vous n'utilisez pas du tout. Donc si vous pouvez apporter des modifications au code du serveur, essayez d'optimiser le taux de transfert de données.