jqGrid Data - json (dot Notation)

jqGrid v4.6

by 1004lucifer

HTML

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-kr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<table id="list"><tr><td></td></tr></table> 
<div id="pager"></div>

JavaScript

var serverJsonData = 
{
   'page':'1',
   'total': 2,
   'records':'13', 
   'rows':[ 
      {'id':'1','name':'Desktop Computers','email':'[email protected]','item':{'price':'1000.72', 'weight': '1.22' }, 'note': 'note', 'stock': '0','ship': '1'}, 
      {'id':'2','name':'<var>laptop</var>','note':'Long text ','stock':'yes','item':{'price':'56.72', 'weight':'1.22'},'ship': '2'},
      {'id':'3','name':'LCD Monitor','note':'note3','stock':'true','item':{'price':'99999.72', 'weight':'1.22'},'ship':'3'},
      {'id':'4','name':'Speakers','note':'note','stock':'false','ship':'4'} 
    ] 
};

$("#list").jqGrid({
  url: '/echo/json/', // use JSFiddle echo service
  datatype: 'json',
  mtype: 'POST',
  postData: { json: JSON.stringify(serverJsonData) },
  colModel:[
    {name:'name',label:'Name', width:150,editable: true},
    {name:'id',width:50, sorttype:'int', editable: true,formatter:'integer'},
    {name:'email',label:'Email', width:150,editable: true,formatter:'email'},
    {name:'stock',label:'Stock', width:60, align:'center', editable: true,formatter:'checkbox',edittype:'checkbox'},
    {name:'item.price',label:'Price', width:100, align:'right', editable: true,formatter:'currency'},
    {name:'item.weight',label:'Weight',width:60, align:'right', editable: true,formatter:'number'},
    {name:'ship',label:'Ship Via',width:90, editable: true,formatter:'select', edittype:'select',editoptions: {value:'2:FedEx;1:InTime;3:TNT;4:ARK;5:ARAMEX'}},      
    {name:'note',label:'Notes', width:100, sortable:false,editable: true,edittype:'textarea', editoptions:{rows:'2',cols:'20'}}      
  ],
  jsonReader : {
    root:"rows",
    page: "page",
    total: "total",
    records: "records",
    repeatitems: false,
    id: "0"
  },
  cellEdit: true,
  caption : 'JSON Data',
  height: 'auto',
  autowidth: true,
  rowNum: 5,
  pager: '#pager'
});