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>
<link rel="stylesheet" href="http://jqgrid.orionhub.org:8000/ui.jqgrid.4.4.4.css">
<script src="http://jqgrid.orionhub.org:8000/grid.locale-es.4.4.4.js"></script>
<script src="http://jqgrid.orionhub.org:8000/grid.base.4.4.4.js"></script>
<script src="http://jqgrid.orionhub.org:8000/grid.common.4.4.4.js"></script>
<script src="http://jqgrid.orionhub.org:8000/grid.custom.4.4.4.js"></script>
<script src="http://jqgrid.orionhub.org:8000/jquery.fmatter.4.4.4.js"></script>
<script src="http://jqgrid.orionhub.org:8000/grid.formedit.4.4.4.js"></script>
<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: "/echo/json/",
postData: {
json: JSON.stringify(editResponse)
},
serializeEditData: function(postData) {
alert("idPer: " + postData.idPer);
}
};
var editResponse = {};
var serverResponse =
{"d":{"page":1,"total":1,"records":100,"rows":[["13570","Some name 1","Australia"],["34233","Some name 2","Washington"]]}};
$("#sampleGrid").jqGrid({
//datatype:'local',
//data: sampleData,
url: "/echo/json/",
postData: {
json: JSON.stringify(serverResponse)
},
mtype: "POST",
datatype: "json",
prmNames: {id: "idPer", search:null, nd : null, page:...