Using key/value pairs for jqGrid cell data

Question

I have a jqGrid defined as such:

$("#tableFeedbackReports").jqGrid({
            url: '/FeedbackReports/GetFeedbackReport',
            datatype: 'json',
            colNames: ['ColA', 'ColB', 'ColC', 'ColD'],
            colModel: [{ name: 'ColA', index: 'ColA', width: 60 },
                        { name: 'ColB', index: 'ColB', width: 60 },
                        { name: 'ColC', index: 'ColC', width: 60 },
                        { name: 'ColD', index: 'ColD', width: 60 }, 
/* ... and so on */

Now, when the ajax call returns, it's has to return an array of what will go into each row.

['value', 'value', 'value']

Is it possible to get jqGrid to accept key/value pairs for row data?

[{ 'ColA' : 'value', 'ColB' : 'value', 'ColC' : 'value', 'ColD' : 'value'}]

So when jqGrid loads the data, it'll automatically binds the data to the column in the model?

Answer 1

Have a look at the jsonReader option on the jqGrid Wiki, specifically its repeatitems property. From that page:

The repeatitems element tells jqGrid that the information for the data in the row is repeatable - i.e. the elements have the same tag cell described in cell element. Setting this option to false instructs jqGrid to search elements in the json data by name. This is the name from colModel or the name described with the jsonmap option in colModel.

Their example is:

jQuery("#gridid").jqGrid({
...
   jsonReader : {
      root:"invdata",
      page: "currpage",
      total: "totalpages",
      records: "totalrecords",
      repeatitems: false,
      id: "0"
   },
...
});

Which will process data in the following format, with key/value pairs:

{ 
  totalpages: "xxx", 
  currpage: "yyy",
  totalrecords: "zzz",
  invdata : [
    {invid:"1",invdate:"cell11", amount:"cell12", tax:"cell13", total:"1234", note:"somenote"},
    {invid:"2",invdate:"cell21", amount:"cell22", tax:"cell23", total:"2345", note:"some note"},
  ...

] }

Answer 2

 Tag    Description
 total  total pages for the query
 page   current page of the query
 records    total number of records for the query
 rows   an array that contains the actual data
  id    the unique id of the row
cell    an array that contains the data for a row

in http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data

root

element. This element describes where our data begins. In other words, this points to the array that contains the data. If we set jQuery("#gridid").jqGrid({ ... jsonReader : {root:"invdata"}, ... }); then the returned string should be

{ 
  "total": "xxx", 
  "page": "yyy", 
  "records": "zzz",
  "invdata" : [
    {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
    {"id" :"2", "cell":["cell21", "cell22", "cell23"]},
  ...
  ]
}

so if u select key value way ; cell should not in the content json string but rows should;

jQuery("#gridid").jqGrid({
...
   jsonReader : {
      repeatitems: false,
   },
...
});

The resulting data should be:

 {"page":"1","total":1,"records":"1",
"rows": [
    {"invid" : "1","invdate":"cell11", "amount" :"cell12", "tax" :"cell13", "total" :"1234", "note" :"somenote"},
    {"invid" : "2","invdate":"cell21", "amount" :"cell22", "tax" :"cell23", "total" :"2345", "note" :"some note"}]

see "id":"1", "cell" keyword is out , and the associate( key value ) array data is derectly under rows keyword ;