Мне нужно было бы предоставить клиентский интерфейс jquery для приложения на стороне сервера, которое производит / потребляет данные в виде JSON.Мне удалось получить данные JSON при загрузке страницы, но когда я нажимаю «addRow», появляется форма добавления, но приложение на стороне сервера не вызывается.Т.е. данные добавляются в сетку, просто не выполняется HTTP-вызов POST "/ add" (с данными JSON):
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/css/ui.jqgrid.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/js/jquery.jqgrid.min.js"></script>
<title>js-tutorials.com : JqGrid jquery simple example and uses </title>
</head>
<script type="text/javascript">
var localdata = [];
// Prepare jQgrid
$("#grid").jqGrid({
url: '/customers',
datatype: 'json',
data: localdata,
mtype: 'GET',
colNames: ['Id',
'Name',
'Description',
'Participants',
'Date'],
colModel: [
{
name: 'id',
index: 'id',
width: 55,
editable: false},
{
name: 'name',
index: 'name',
width: 90,
editable: true},
{
name: 'description',
index: 'description',
width: 90,
editable: true},
{
name: 'participants',
index: 'participants',
editable: true,
edittype:"select",
editoptions:{ value:"US:USA;CND:CANADA;FR:FRANCE;LUX:LUXEMBORG"}
},
{
name: 'date',
index: 'date',
width: 90,
editable: false,
formatter: 'date',
formatoptions: {
newformat: 'd/M/Y'
},
editable: true}
],
rowNum: 10,
rowList: [10, 20, 30],
autowidth: false,
width: 600,
rownumbers: true,
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption: "Events",
emptyrecords: "Empty records",
loadonce: false,
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "id"
}
});
$("#grid").navButtonAdd('#pager', {
caption: "Add",
buttonicon: "ui-icon-plus",
onClickButton: addRow,
position: "last",
title: "",
cursor: "pointer"
});
$("#grid").navButtonAdd('#pager', {
caption: "Edit",
buttonicon: "ui-icon-pencil",
onClickButton: editRow,
position: "last",
title: "",
cursor: "pointer"
});
$("#grid").navButtonAdd('#pager', {
caption: "Delete",
buttonicon: "ui-icon-trash",
onClickButton: deleteRow,
position: "last",
title: "",
cursor: "pointer"
});
// Assign functions to pager buttons
function addRow() {
// Get the currently selected row
$("#grid").jqGrid('editGridRow', 'new', {
url: "/add",
datatype: 'json',
mtype: 'POST',
serializeEditData: function(data) {
data.id = 0;
data.date = new Date(data.date).toISOString();
return $.param(data);
},
recreateForm: true,
closeAfterAdd: true,
reloadAfterSubmit: true,
beforeShowForm: function(form) {
$("#date").datepicker({
changeMonth: true,
changeYear: true
});
},
afterSubmit: function(response, postdata) {
var result = eval('(' + response.responseText + ')');
var errors = "";
if (result.success == false) {
for (var i = 0; i < result.message.length; i++) {
errors += result.message[i] + "<br/>";
}
} else {
$("#dialog").text('Entry has been added successfully');
$("#dialog").dialog({
title: 'Success',
modal: true,
buttons: {
"Ok": function() {
$(this).dialog("close");
}
}
});
}
// only used for adding new records
var new_id = null;
return [result.success, errors, new_id];
}
});
}
Как вы можете видеть, я пытался добавить параметры "тип данных" и«mtype» для функции addRow, но она все еще не вызывает сервер:
function addRow() {
// Get the currently selected row
$("#grid").jqGrid('editGridRow', 'new', {
url: "/add",
datatype: 'json',
Любая помощь?