Reputation: 1266
This is my first attempt with JQgrid and I am confused from the documentation as to if I need the jsonmap
attribute with in my colmodel
. As of now I’m getting all of the data but from firebug I see that all I’m getting in each col is:
<td aria-describedby="list_MEMBERID" title="" style="" role="gridcell"> </td>
Could someone explain what I am doing wrong exactly?
The Json:
{
"ROWS": [
{
"ID": 508,
"CELLS": {
"PHONE": "847-382-8872",
"STATE": "IL",
"ZIP": 60010,
"NAME": "Norton's U.S.A.",
"DESC": "We sell only products made in the United States!We offer an eclectic mix of common household items from toys to tools, glassware to garden supplies, fashions to food and so much more. When you shop at Norton's U.S.A, you help keep America working! ",
"CITY": "Riverwoods",
"ADDR": "400 Lageschulte Street"
}
}
],
"PAGE": 1,
"RECORDS": 1,
"TOTAL": 1
}
The Javascript:
$(function(){
$("#list").jqGrid({
url:'cfc/buildData.cfc?method=getDining',
datatype: 'json',
mtype: 'GET',
colNames:['Member ID','Member Name', 'Address','City','Zip Code','State', 'Phone', 'Description'],
colModel :[
{name:'MEMBERID', index:'MEMBERID', jsonmap:'MEMBERID', width:60},
{name:'NAME', index:'NAME', jsonmap:'NAME', width:90},
{name:'ADDR', index:'ADDR', jsonmap:'ADDR', width:80, align:'right'},
{name:'CITY', index:'CITY', jsonmap:'CITY', width:80, align:'right'},
{name:'ZIP', index:'ZIP', jsonmap:'ZIP', width:80, align:'right'},
{name:'STATE', index:'STATE', jsonmap:'STATE', width:80, align:'right'},
{name:'PHONE', index:'PHONE', jsonmap:'PHONE', width:80, align:'right'},
{name:'DESC', index:'DESC', jsonmap:'DESC', width:200, sortable:false}
],
pager: '#pager',
rowNum: 10,
rowList:[10,20,30],
sortname: 'MEMBERID',
sortorder: 'desc',
viewrecords: true,
gridview: true,
caption: 'Lake County Members',
jsonReader : {
root: "ROWS",
page: "PAGE",
total: "TOTAL",
records: "RECORDS",
repeatitems: true,
cell: "CELLS",
id: "MEMBERID",
subgrid: {root:"ROWS",
repeatitems: true,
cell:"CELLS"
}
}
});
});
Upvotes: 0
Views: 1318
Reputation: 222017
The documentation about jsonReader
and jsonmap
is really difficult for the first reading.
The most important property of the jsonReader
is repeatitems
. Default value is repeatitems: true
. It means that the format of the rows of data in the JSON should be
{"id" :"1", "cell": ["cell11", "cell12", "cell13"]}
It's important to mention that the cell
property should has array of strings as the value. The jsonmap
property of the colModel
will be ignored.
If you would just use jsonReader: {repeatitems: true}
you would overwrite only one property of the default jsonReader
. So the format of the data which represent the row in the JSON input should be
{"id": "abc", "col1": false, "col3": 123, "col2": "cell12"}
In the case no cell
property should be used in the input. The data for the column will be identified by name instead of by position in the cell
array. The property name col1
, col2
, col3
can be either from the name
property of colModel
or from the jsonmap
if it's defined.
In case of more complex format of input like
{"id": "abc", "col1": false, "coordinates": {"x": 123, "y": "cell12"}}
you can define for the x
column jsonmap: coordinates.x
and for the y
column jsonmap: coordinates.y
.
In case of your example I would recommend you to change format of the JSON data to
{
"ROWS": [
{
"ID": 508,
"PHONE": "847-382-8872",
"STATE": "IL",
"ZIP": 60010,
"NAME": "Norton's U.S.A.",
"DESC": "We sell only products made in the United States!We offer an eclectic mix of common household items from toys to tools, glassware to garden supplies, fashions to food and so much more. When you shop at Norton's U.S.A, you help keep America working! ",
"CITY": "Riverwoods",
"ADDR": "400 Lageschulte Street"
}
],
"PAGE": 1,
"RECORDS": 1,
"TOTAL": 1
}
'MEMBERID'
from the column model because you don't included any data in the JSON input.sortname: 'MEMBERID'
or change it to some existing columns.jsonmap
propertiesThe jsonReader
should be used as
jsonReader : {
root: "ROWS",
page: "PAGE",
total: "TOTAL",
records: "RECORDS",
repeatitems: false,
id: "ID",
}
The value of ids of the rows of the grid (the ids for <tr>
elements of the table) will be get from the 'ID'
property of the JSON input. You should be careful with the values for the ids: there must be unique on the whole page.
After the above changes the grid will display the data: see the demo. I added height: 'auto'
parameter only to reduce the size of unneeded space in the grid.
Upvotes: 2