JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/ui-lightness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="http://jqgrid.orionhub.org:8000/grid.locale-es.js"></script>
<script src="http://jqgrid.orionhub.org:8000/jquery.jqGrid.src.js"></script>
<link rel="stylesheet" href="http://jqgrid.orionhub.org:8000/ui.jqgrid.css">
<div>
<table id="sampleGrid"><tr><td></td></tr></table>
<div id="pagerSampleGrid"></div>
</div>
JavaScript
$(document).ready(function () {
setjqGridSettings();
setGridRequirentes();
});
function setjqGridSettings()
{
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
$.extend($.jgrid.defaults,
{
mtype:"POST",
datatype: 'json',
ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
viewrecords: true,
loadonce: true,
gridview: true,
scrollOffset: 0,
autowidth: true,
ignoreCase: true,
jsonReader : {
root: "d.rows",
page: "d.page",
total: "d.total",
records: "d.records",
cell: ""},
ajaxSelectOptions: { type: "GET", contentType: 'application/json; charset=utf-8' }
});
$.extend($.jgrid.edit,
{
ajaxEditOptions: { contentType: "application/json; charset=utf-8" },
closeAfterEdit: true,
closeAfterAdd: true,
closeOnEscape: false,
reloadAfterSubmit: false,
jqModal: false
});
}
function setGridRequirentes()
{
var modSettings =
{
width: 440,
url: 'myUrl.aspx',
serializeEditData: function(postData) {
console.log(postData)
}
};
var sampleData = [
{idPer:"13570", person:"some name 1",idCity:"Washington"},
{idPer:"34233", person:"some name 2",idCity:"Australia"},
];
$("#sampleGrid").jqGrid({
//datatype:'local',
//data: sampleData,
url: "MyPage.aspx/getPeople",
mtype: "GET",
prmNames: {id: "idPer", search:null, nd : null, page: null, rows: null, sort : null, order : null},
colNames:['idPer', 'person', 'idCity'],
colModel:[
{name:'idPer',index:'idPer', hidden: true, key: true, width:55,...