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: "POST", 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 buildSelectLocal = function(options) {
return function(data) {
data = $.parseJSON(data);
data = data.d ? data.d : data;
var s = '<select><option value="">- Select ' + options.label + ' -</option>';
for (var i = 0, l=data.length; i<l ; i++) {
s += '<option value="'+data[i][0]+'">'+data[i][1]+'</option>';
}
return s + "</select>";
};
};
var modSettings =
{
width: 440,
url: "/echo/json/",
postData: {
json: JSON.stringify(editResponse)
},
serializeEditData: function(postData) {
alert("idPer: " + postData.idPer + "\npostData: " + JSON.stringify(postData));
return postData;
},
afterSubmit: function (response, postData) {
// remap id to text
postData.idCity = $("#idCity...