How to load the JSON data into the Jqgrid?
First of all you need to define id
of the row in the input data. The id
attribute of every row (<tr>
) will be set in the corresponding value. Because you have already companyid
which could play the role it would be enough to add key: true
to the properties of "companyid"
column in colModel
.
The problem with loading of the date from the server directly (inclusive loading from the file) you can solve by adding jsonReader
which describe the format of input data. Because you use loadonce: true
the total
, records
and the page
properties of input data will be ignored and you can use jsonReader
in the following simple form:
jsonReader: {repeatitems: false, root: function (obj) { return obj; }}
The corresponding demo is here.
If you need to load the data from the array of data which you posted your code should directly work ( see another demo). I suppose use have some other problem in the parsing of JSON data, but you don't posted the corresponding code.
The advice about the id
and key: true
are still take place. You can use localReader: {id: "companyid"}
for the second case and the same property id: "companyid"
in the jsonReader
alternatively. I personally prefer to use key: true
because the code is easy to read and it's independent from the reader used.
User
Updated on July 09, 2022Comments
-
User almost 2 years
I use the following way to load the data into the jqgrid.I cant able to load the json data into the jqgrid.So i parse the json to array like mydata=json.parse(jsondata).Then i bind this array(mydata) into jqgrid using datatype: "local".my question is How to bind the json data into the jqgrid?
$("#datagrid").jqGrid({ datatype: "local", data: mydata, colNames:['companyid','company', 'price', 'Change','perchange','LastUpdated'], colModel:[ {name:'companyid',index:'companyid', width:100,editable:true,editoptions:{size:10}}, {name:'company',index:'company', width:100,editable:true}, {name:'price',index:'price', width:100,editable:true,editoptions:{size:10}}, {name:'Change',index:'Change', width:100,editable:true,editoptions:{size:25}}, {name:'perchange',index:'perchange', width:100, align:"right",editable:true,editoptions:{size:10}}, {name:'LastUpdated',index:'LastUpdated', width:200, align:"right",editable:true,editoptions:{size:10}} ], rowNum:10, rowList:[3,6], loadonce: true, pager: '#navGrid', sortname: 'companyid', sortorder: "asc", height: 210, width:600, onSelectRow: function(id) { getID = jQuery("#datagrid").jqGrid('getCell', id, 'companyid') }, viewrecords: true, caption:"JQ GRID" });
JSON format:
[ { "company": "test", "price": 98, "Change": 8, "perchange": 8, "LastUpdated": "2", "companyid": 2 }, { "company": "test123", "price": 1, "Change": 1, "perchange": 1, "LastUpdated": "1", "companyid": 3 }, { "company": "abc", "price": 1234, "Change": 123, "perchange": 1, "LastUpdated": "1", "companyid": 1 } ]