[JavaScript] [easyui] How to bind a DataGrid to JSON

 

How to bind a DataGrid to JSON

 

 var json={"total":28,"rows":[{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":28.50,"attr1":"Venomless","itemid":"EST-11"},{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},{"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":63.50,"attr1":"Adult Female","itemid":"EST-16"},{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},{"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}],"footer":[{"unitcost":19.80,"listprice":60.40,"productid":"Average:"},{"unitcost":198.00,"listprice":604.00,"productid":"Total:"}]};$('#tt').datagrid({title: 'DataGrid - ContextMenu',width: 700,height: 'auto',fitColumns: true,columns:[[{field:'itemid',title:'Item ID',width:80},{field:'productid',title:'Product ID',width:120},{field:'listprice',title:'List Price',width:80,align:'right'},{field:'unitcost',title:'Unit Cost',width:80,align:'right'},{field:'attr1',title:'Attribute',width:250},{field:'status',title:'Status',width:60,align:'center'}]],onHeaderContextMenu: function(e, field){e.preventDefault();if (!$('#tmenu').length){createColumnMenu();}$('#tmenu').menu('show', {left:e.pageX,top:e.pageY});}}).datagrid("loadData",json);});