How to Read Json File in Jqgrid

I suppose that the same question is interesting for other persons. So +i from me for the question.

Y'all can solve the problem in at least two ways. The kickoff one you can utilise datatype: "jsonstring" and datastr: data. In the case you demand to add boosted parameter jsonReader: { repeatitems: imitation }.

The second manner is to use datatype: "local" and information: data.rows. In the case the localReader will be used to read the data from the data.rows array. The default localReader tin can read the data.

The corresponding demos are here and hither.

I modified a niggling your data: filled "Proper name" column and included the tertiary item in the input data.

Now you lot tin can apply local paging, sorting and filtering/searching of the data. I included a petty more code to demonstrate the features. Below you notice the code of one from the demos:

          $(document).ready(office () {     'use strict';     var data = {             "page": "ane",             "records": "iii",             "rows": [                 { "id": "83123a", Name: "Proper name i", "PackageCode": "83123a" },                 { "id": "83432a", Proper name: "Proper name iii", "PackageCode": "83432a" },                 { "id": "83566a", Name: "Name 2", "PackageCode": "83566a" }             ]         },         grid = $("#packages");      filigree.jqGrid({         colModel: [             { name: 'PackageCode', index: 'PackageCode', width: "110" },             { name: 'Name', index: 'Name', width: "300" }         ],         pager: '#packagePager',         datatype: "jsonstring",         datastr: data,         jsonReader: { repeatitems: faux },         rowNum: 2,         viewrecords: true,         caption: "Packages",         height: "car",         ignoreCase: true     });     grid.jqGrid('navGrid', '#packagePager',         { add together: simulated, edit: imitation, del: fake }, {}, {}, {},         { multipleSearch: true, multipleGroup: true });     filigree.jqGrid('filterToolbar', { defaultSearch: 'cn', stringResult: true }); });                  

UPDATED: I decided to add more details almost the differences between datatype: "jsonstring" and datatype: "local" scenarios considering the old answer exist read and voted by many readers.

I suggest to modify the above code a little to show better the differences. The fist code uses datatype: "jsonstring"

          $(part () {     "use strict";     var data = [             { id: "10", Name: "Name ane", PackageCode: "83123a", other: "10", subobject: { x: "a", y: "b", z: [1, 2, 3]} },             { id: "20", Name: "Proper noun 3", PackageCode: "83432a", other: "y", subobject: { x: "c", y: "d", z: [iv, 5, six]} },             { id: "xxx", Proper name: "Proper noun 2", PackageCode: "83566a", other: "z", subobject: { x: "e", y: "f", z: [seven, 8, 9]} }         ],         $grid = $("#packages");      $filigree.jqGrid({         information: data,         datatype: "local",         colModel: [             { proper name: "PackageCode", width: 110 },             { name: "Name", width: 300 }         ],         pager: "#packagePager",         rowNum: ii,         rowList: [one, 2, ten],         viewrecords: true,         rownumbers: true,         caption: "Packages",         height: "machine",         sortname: "Proper name",         autoencode: truthful,         gridview: true,         ignoreCase: true,         onSelectRow: function (rowid) {             var rowData = $(this).jqGrid("getLocalRow", rowid), str = "", p;             for (p in rowData) {                 if (rowData.hasOwnProperty(p)) {                     str += "propery \"" + p + "\" + have the value \"" + rowData[p] + "\northward";                 }             }             alert("all properties of selected row having id=\"" + rowid + "\":\n\n" + str);         }     });     $filigree.jqGrid("navGrid", "#packagePager",         { add: false, edit: fake, del: faux }, {}, {}, {},         { multipleSearch: true, multipleGroup: true });     $grid.jqGrid("filterToolbar", { defaultSearch: "cn", stringResult: true }); });                  

Information technology displays (see the demo)

One can see unsorted items in the same order similar input data. The items of input data volition be saved in internal parameters data and _index. getLocalRow method used in onSelectRow shows that items of internal data contains only properties of input items which names corresponds to name holding of some jqGrid columns. Additionally unneeded _id_ property volition be added.

On the other side the next demo which uses datatype: "local" displays sorted information and all properties inclusive complex objects will be withal saved in the internal information:

The code used in the last demo is included below:

          $(part () {     "use strict";     var data = [             { id: "10", Name: "Name 1", PackageCode: "83123a", other: "x", subobject: { x: "a", y: "b", z: [1, 2, 3]} },             { id: "twenty", Name: "Proper noun 3", PackageCode: "83432a", other: "y", subobject: { ten: "c", y: "d", z: [4, 5, 6]} },             { id: "thirty", Name: "Name ii", PackageCode: "83566a", other: "z", subobject: { x: "e", y: "f", z: [seven, 8, ix]} }         ],         $grid = $("#packages");      $grid.jqGrid({         data: data,         datatype: "local",         colModel: [             { name: "PackageCode", width: 110 },             { name: "Name", width: 300 }         ],         pager: "#packagePager",         rowNum: 2,         rowList: [1, 2, 10],         viewrecords: true,         rownumbers: true,         caption: "Packages",         acme: "auto",         sortname: "Proper name",         autoencode: truthful,         gridview: true,         ignoreCase: true,         onSelectRow: function (rowid) {             var rowData = $(this).jqGrid("getLocalRow", rowid), str = "", p;             for (p in rowData) {                 if (rowData.hasOwnProperty(p)) {                     str += "propery \"" + p + "\" + accept the value \"" + rowData[p] + "\"\n";                 }             }             alert("all backdrop of selected row having id=\"" + rowid + "\":\n\north" + str);         }     });     $grid.jqGrid("navGrid", "#packagePager",         { add: false, edit: false, del: simulated }, {}, {}, {},         { multipleSearch: truthful, multipleGroup: true });     $grid.jqGrid("filterToolbar", { defaultSearch: "cn", stringResult: true }); });                  

Then I would recommend to use datatype: "local" instead of datatype: "jsonstring". datatype: "jsonstring" could have some advantages only in some very specific scenarios.

housetrall1948.blogspot.com

Source: https://stackoverflow.com/questions/6831306/load-local-json-data-in-jqgrid-without-addjsonrows

Share this post