How to map cell data to column model IF column model in JSON response?

Question

I defined jqgrid column column names and column arrays in the JSON response so that I can dynamically populate jqgrid headers.

The problem is that I have

Data is not displayed in the grid. How to map cells.value to each column?

Json

 { "colModel": [ { "name": "ID", "index": "ID", "width": 60, "align": "left" }, { "name": "First Name", "index": "First Name", "width": 140, "align": "left" }, { "name": "Last Name", "index": "Last Name", "width": 160, "align": "left" } ], "colNames": [ "ID", "First Name", "Last Name" ], "mypage": { "outerwrapper": { "page":"1", "total":"1", "records":"1", "innerwrapper": { "rows":[ { "id":"1", "cells": [ { "value":"12345" }, { "value":"David" }, { "value":"Smith" } ] } ] } } } } 

JQGrid Definition

 $(document).ready(function () { $.ajax({ type: "GET", url: "jqgrid.json", data: "", dataType: "json", success: function(result){ var columnData = result.mypage.outerwrapper.innerwrapper.rows, columnNames = result.colNames, columnModel = result.colModel; $("#dataGrid").jqGrid({ jsonReader: { root: "result.mypage.outerwrapper.innerwrapper.rows", cell: "result.mypage.outerwrapper.innerwrapper.rows.cells", repeatitems: true, page: "result.mypage.outerwrapper.page", total: "result.mypage.outerwrapper.total", records: "result.mypage.outerwrapper.records" }, datatype: 'local', data: columnData, colNames: columnNames, colModel: columnModel, gridview: true, pager: "Pager", height: "auto", rowNum: 5, rowList: [5, 10, 20, 50], viewrecords: true }); } }); $("#dataGrid").jqGrid('navGrid','#Pager'); }); 

Answer 1

In the current question, you continue the extremely exotic JSON input format.

First of all, I recommend never using columns containing metacharacters in the value of the name property in colModel . In your case, you used "name": "First Name" and "name": "Last Name" , which can follow serious problems. You must replace the name property with names like "name": "FirstName" .

The next problem is that your data can only be read using the jsonmap colModel . Therefore, you must define the property in the JSON input. In addition, you cannot use the jsonmap colModel property with datatype: 'local' . Thus, you need to either convert the information from the result.mypage.outerwrapper.innerwrapper.rows part of the result.mypage.outerwrapper.innerwrapper.rows input into some more readable format, or use datatype: 'jsonstring' .

So you can fix the JSON data as follows

 { "colModel": [ { "name": "ID", "index": "ID", "width": 60, "align": "left", "jsonmap": "cells.0.value" }, { "name": "FirstName", "index": "FirstName", "width": 140, "align": "left", "jsonmap": "cells.1.value" }, { "name": "LastName", "index": "LastName", "width": 160, "align": "left", "jsonmap": "cells.2.value" } ], "colNames": [ "ID", "First Name", "Last Name" ], "mypage": { "outerwrapper": { "page":"1", "total":"1", "records":"1", "innerwrapper": { "rows":[ { "id":"1", "cells": [ { "value":"12345" }, { "value":"David" }, { "value":"Smith" } ] } ] } } } } 

and code to the next

 $.ajax({ type: "GET", url: "SK11-4.json", data: "", dataType: "json", success: function (result) { var columnData = result.mypage.outerwrapper, columnNames = result.colNames, columnModel = result.colModel; $("#dataGrid").jqGrid({ datatype: 'jsonstring', datastr: columnData, colNames: columnNames, colModel: columnModel, jsonReader: { root: 'innerwrapper.rows', repeatitems: false }, gridview: true, pager: "Pager", height: "auto", rowNum: 5, rowList: [5, 10, 20, 50], viewrecords: true }); } }); $("#dataGrid").jqGrid('navGrid', '#Pager'); 

As a result, you get demos that work.

Answer 2

Here is an example from my recent project (DO NOT FORGET HTML TAGS!):

  <table id="campaignGuidance"></table> <script> $("#campaignGuidance").jqGrid({ url: '[PUT THE URL FOR YOUR JSON HERE]', datatype: "json", colNames: ['Status', 'Category', 'Description', 'Details', 'Ad/RM', 'Available'], colModel: [ { name: 'Status', index: 'Status', width: 40, colName: 'Status', canHide: true, hidden: false }, { name: 'Category', index: 'Category', width: 150, colName: 'Category' }, { name: 'Description', index: 'Description', width: 200, colName: 'Description', canHide: true, hidden: false }, { name: 'Details', index: 'Details', width: 200, colName: 'Details', canHide: true, hidden: false }, { name: 'AdOrRm', index: 'AdOrRm', width: 70, colName: 'Ad/RM', canHide: true, hidden: false }, { name: 'Available', index: 'Available', width: 110, colName: 'Available', canHide: true, hidden: false } ], ondblClickRow: function (id) { actions.viewCGDetails(id); }, rowNum: 1000, autowidth: false, height: 700, width: 1900, rowList: [2, 5, 10, 20, 30], rowTotal: 2000, loadonce: true, viewrecords: true, caption: "CGD" }); </script>