Javascript jqGrid发送编辑/删除内联信息序列化JSON格式
我正在尝试使用Javascript jqGrid发送编辑/删除内联信息序列化JSON格式,javascript,json,api,jqgrid,Javascript,Json,Api,Jqgrid,我正在尝试使用formatter:'actions'对一列进行内联编辑，并希望以JSON格式将信息发送到服务器，但我做不到。我已经尝试了很多东西，但是没有结果。仍在发送信息而不序列化 还尝试了$.extend（$.jgrid.edit，（…）在初始化时$（函数（）{…}）没有结果 我的格式选项如下所示： formatoptions: { keys: true, editbutton: true, delbutton: true, //url: url, e
formatter:'actions'$.extend（$.jgrid.edit，（…）在初始化时$（函数（）{…}）没有结果
我的格式选项如下所示：
formatoptions: {
keys: true,
editbutton: true,
delbutton: true,
//url: url,
editOptions: {
url: url,
ajaxEditOptions: {
//url: url,
contentType: 'application/json;charset=utf-8',
type: 'POST',
datatype: 'json'
}
},
delOptions: {
url: url,
ajaxDelOptions: {
//url: url,
contentType: 'application/json;charset=utf-8',
type: 'POST',
datatype: 'json'
}
}
}}
但是仍然不行：S我不知道我做错了什么。
如果你能帮助我，我将不胜感激
PS：我写了太多的url属性，因为我在检查我必须在哪里写才能工作。对于“编辑”，仅当我将url置于“编辑选项”之外时有效，仅当我将其置于“格式选项”中时有效。但是对于delete，它不关心我是否将其放入/移出delOptions
，包括ajaxDelOptions
。如果你也能帮我，我将不胜感激。
已更新
删除可以很好地使用此配置，但内联编辑保存按钮仍然不起作用。我粘贴了相同的配置，更改了编辑选项，但仍然无法工作
delOptions: {
url: url,
mtype: 'POST',
reloadAfterSubmit: true,
ajaxDelOptions: {
contentType: "application/json"
},
serializeDelData: function(postdata) {
return JSON.stringify(postdata);
}
}
更新2
这是我的JS
$(function() {
$.mask.definitions['2'] = '[0-2]';
$.mask.definitions['5'] = '[0-5]';
$.extend($.jgrid.defaults, {
ajaxRowOptions: {
contentType: "application/json",
dataType: "json",
success: function() {
},
error: null
},
serializeRowData: function(data) {
delete data.oper;
return JSON.stringify(data);
}
});
});
function loadGrid(identifier) {
$("#list").jqGrid({
url: 'foo.html?identifier=' + identifier,
type: 'GET',
datatype: 'json',
repeatitems: false,
autowidth: true,
altRows: false,
hidegrid: false,
cmTemplate: {
sortable: false,
resizable: false
},
colNames: ["id", "column1", "column2", "column3", "column4", "column5", "column6", "column7", " "],
colModel: [
{name: "id", label: "id", hidden: true},
{name: "columnData1", label: "columnData1", key: true, hidden: true},
{name: "columnData2", label: "columnData2", edittype: "select", editable: true,
editoptions: {
dataUrl: 'foo/bar.html'
}},
{name: "columnData3", label: "columnData3", width: 75, editable: true},
{name: "columnData4", label: "columnData4", width: 100, edittype: "select", editable: true,
editoptions: {
dataUrl: 'foo/bar.html'
}},
{name: "columnData5", align: "right", label: "columnData5", width: 55, formatter: 'number',
formatOptions: {
decimalPlaces: 2
}, editable: true},
{name: "columnData6", align: "right", label: "columnData6", width: 55, formatter: 'number',
formatOptions: {
decimalPlaces: 2
}, editable: true},
{name: "columnData7", align: "right", label: "columnData7", width: 55, formatter: 'number',
formatOptions: {
decimalPlaces: 2
}},
{name: "actions", formatter: "actions", width: 35}
],
pager: '#pager',
rows: '',
rowList: [],
pgbuttons: false,
pgtext: null,
viewrecords: false,
gridview: true,
caption: 'MyCaption',
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id + "_t";
pager_id = "p_" + subgrid_table_id;
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "'></table><div id='" + pager_id + "'></div>");
$("#" + subgrid_table_id).jqGrid({
url: 'foo/bar.html?identifier=' + identifier + '&rowId=' + row_id,
type: 'GET',
datatype: 'json',
repeatitems: false,
autowidth: true,
altRows: false,
hidegrid: false,
cmTemplate: {
sortable: false,
resizable: false
},
colNames: ['column1', 'column2', 'column3', 'column4', 'column5', 'column6', ' '],
colModel: [
{name: 'columnData1', hidden: true, key: true},
{name: 'columnData2', width: 75, formatter: 'date',
formatoptions: {
srcformat: 'Y-m-d',
newformat: 'd/m/Y'
},
editoptions: {
readonly: 'readonly',
dataInit: function(elem) {
$(elem).width("75%");
$(elem).datepicker({
dateFormat: "dd/mm/yy",
showOn: "button",
buttonImage: "../css/images/calendar.gif",
buttonText: "Muestra el calendario.",
buttonImageOnly: true
});
}}
, editable: true},
{name: 'columnData3', width: 75,
formatter: function(cellval, opts) {
if (!/^([0-1][0-9]|2[0-3]:[0-5][0-9])/.test(cellval)) {
var date = new Date(cellval);
opts = $.extend({}, $.jgrid.formatter.date, opts);
return $.fmatter.util.DateFormat("", date, 'H:i', opts);
} else {
var date = new Date();
var time = cellval.split(":");
date.setFullYear(1899);
date.setMonth(12);
date.setDate(30);
date.setHours(time[0]);
date.setMinutes(time[1]);
date.setSeconds(0);
opts = $.extend({}, $.jgrid.formatter.date, opts);
return $.fmatter.util.DateFormat("", date, 'H:i', opts);
}
},
editoptions: {dataInit: function(elem) {
$(elem).mask("29:59");
}},
editrules: {custom: true, custom_func: function(value) {
if (/^([0-1][0-9]|2[0-3]:[0-5][0-9])/.test(value)) {
return [true, ""];
} else {
return [false, " no es un formato de hora válido.<br/>Por favor, introduzca una hora en un formato <b>hh:mm</b> válido."];
}
}}, editable: true},
{name: 'columnData4', width: 80, editable: true},
{name: 'columnData5', width: 200, editable: true},
{name: 'columnData6', align: 'right', width: 50, editable: true, formatter: 'number',
formatoptions: {
decimalPlaces: 2
}},
{name: 'actions', formatter: 'actions', width: 40,
formatoptions: {
//keys: false,
editbutton: true,
delbutton: true,
url: "foo/bar/edit.html?identifier=" + identifier + "&rowId=" + row_id,
editOptions: {
keys: true,
//url: "foo/bar/edit.html?identifier=" + identifier + "&rowId=" + row_id,
mtype: "POST"
},
delOptions: {
url: "foo/bar/delete.html?identifier=" + identifier + "&rowId=" + row_id,
mtype: 'POST',
reloadAfterSubmit: true,
ajaxDelOptions: {
contentType: "application/json"
},
serializeDelData: function(postdata) {
delete postdata.oper;
return JSON.stringify(postdata);
}
}
}}
],
height: 190,
pager: pager_id,
rows: '',
rowList: [],
pgbuttons: false,
pgtext: null,
viewrecords: false,
gridview: true,
loadError: function(xhr, status, error) {
alert(xhr + " : " + status + " : " + error);
},
jsonReader: {
repeatitems: false
},
gridComplete: function() {
$("div.ui-inline-save").click(function() {
var dlgDiv = $("#info_dialog");
dlgDiv.width(600);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
});
$("div.ui-inline-del").click(function() {
var dlgDiv = $("#delmod" + subgrid_table_id);
dlgDiv.width(600);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
});
$("#gbox_" + subgrid_id + "_t").removeClass('ui-corner-all');
$("#" + pager_id).removeClass('ui-corner-bottom');
disableSelection(document.getElementById(subgrid_table_id));
}
}).navGrid("#" + pager_id, {add: true, edit: false, del: false, search: false, view: false, refresh: true}, {},
{afterShowForm: function(form) {
var dlgDiv = $("#editmod" + subgrid_table_id);
dlgDiv.width(600);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
}
});
},
loadError: function(xhr, status, error) {
alert(xhr + " : " + status + " : " + error);
},
jsonReader: {
repeatitems: false
},
gridComplete: function() {
$("div.ui-inline-save").click(function() {
var dlgDiv = $("#info_dialog");
dlgDiv.width(600);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
});
$("div.ui-inline-del").click(function() {
var dlgDiv = $("#delmodlist");
dlgDiv.width(600);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
});
disableSelection(document.getElementById("list"));
}
}).navGrid("#pager", {add: true, edit: false, del: false, search: false, view: false, refresh: true}, {},
{afterShowForm: function(form) {
var dlgDiv = $("#editmodlist");
dlgDiv.width(600);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
}
});
var height = $("body").height();
$('.ui-jqgrid-bdiv').height(height);
}
$（函数（）{
$.mask.definitions['2']='[0-2]'；
$.mask.definitions['5']='[0-5]'；
$.extend（$.jgrid.defaults{
AjaxRow选项：{
contentType:“应用程序/json”，
数据类型：“json”，
成功：函数（）{
},
错误：null
},
serializeRowData:函数（数据）{
删除data.oper；
返回JSON.stringify（数据）；
}
});
});
函数loadGrid（标识符）{
$（“#列表”）.jqGrid({
url:'foo.html？标识符='+标识符，
键入：“GET”，
数据类型：“json”，
重复项：false，
自动宽度：正确，
奥尔特罗斯：错，
希德格里德：错，
cmTemplate：{
可排序：false，
可调整大小：false
},
collnames:[“id”、“column1”、“column2”、“column3”、“column4”、“column5”、“column6”、“column7”和“，”]，
colModel：[
{name:“id”，label:“id”，hidden:true}，
{name:“columnData1”，label:“columnData1”，key:true，hidden:true}，
{名称：“columnData2”，标签：“columnData2”，编辑类型：“选择”，可编辑：true，
编辑选项：{
dataUrl:'foo/bar.html'
}},
{名称：“columnData3”，标签：“columnData3”，宽度：75，可编辑：true}，
{名称：“columnData4”，标签：“columnData4”，宽度：100，编辑类型：“选择”，可编辑：true，
编辑选项：{
dataUrl:'foo/bar.html'
}},
{name:“columnData5”，align:“right”，标签：“columnData5”，宽度：55，格式化程序：“number”，
格式选项：{
小数位数：2
}，可编辑：true}，
{名称：“columnData6”，对齐：“右”，标签：“columnData6”，宽度：55，格式化程序：“数字”，
格式选项：{
小数位数：2
}，可编辑：true}，
{名称：“columnData7”，对齐：“右”，标签：“columnData7”，宽度：55，格式化程序：“数字”，
格式选项：{
小数位数：2
}},
{名称：“操作”，格式化程序：“操作”，宽度：35}
],
寻呼机：“#寻呼机”，
行：“”，
行列表：[]，
PG按钮：错误，
pgtext:null，
viewrecords:false，
gridview：没错，
标题：“我的标题”，
子网格：对，
subGridRowExpanded:函数（subgrid\u id，row\u id）{
var子网格表id、寻呼机id；
子网格\表\ id=子网格\ id+“\ t”；
pager_id=“p_”+子网格\u表\u id；
$（“#”+子网格_id）.html（“”）；
$（“#”+子网格_表_id）.jqGrid({
url:'foo/bar.html？标识符='+标识符+'&rowId='+行id，
键入：“GET”，
数据类型：“json”，
重复项：false，
自动宽度：正确，
奥尔特罗斯：错，
希德格里德：错，
cmTemplate：{
可排序：false，
可调整大小：false
},
collnames:['column1'，'column2'，'column3'，'column4'，'column5'，'column6'，''，
colModel：[
{name:'columnData1'，hidden:true，key:true}，
{名称：'columnData2'，宽度：75，格式化程序：'date'，
格式选项：{
SRC格式：“Y-m-d”，
新格式：“d/m/Y”
},
编辑选项：{
只读：“只读”，
dataInit：函数（elem）{
$（元素）。宽度（“75%”；
$（元素）.日期选择器({
日期格式：“日/月/年”，
展示：“按钮”，
buttonImage:“../css/images/calendar.gif”，
按钮文字：“Muestra el calendario.”，
buttonImageOnly:true
});
}}
，可编辑：true}，
{名称：'columnData3'，宽度：75，
格式化程序：函数（cellval，opts）{
如果（！/^（[0-1][0-9]| 2[0-3]：[0-5][0-9]）/.test（cellval））{
var日期=新日期（cellval）；
opts=$.extend（{}，$.jgrid.formatter.date，opts）；
返回$.fmatter.util.DateFormat（“，日期，'H:i'，选项）；
}否则{
editOptions: {
url: url,
mtype: "POST", // is already default and can be removed
keys: true
}
ajaxRowOptions: { contentType: "application/json", dataType: "json" },
serializeRowData: function (data) { return JSON.stringify(data); }