jqGrid发送编辑/删除内联信息序列化的JSON格式
我正在尝试使用formatter: 'actions'的列进行内联编辑，并希望以JSON格式将信息发送到服务器，但我不能。我已经尝试了很多东西，但没有结果。仍然在没有序列化的情况下发送信息。
还在初始化$.extend($.jgrid.edit, (...));处尝试$(function(){...});但没有结果。
我的格式选项如下所示：
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'
}
}
}}
但仍然没有工作：我不知道我做错了什么。 如果你帮助我，我会很感激。
PS：我写了太多的url属性，因为我正在检查我必须写的地方才能正常工作。对于编辑，仅当我将url从editOptions中删除时才有效，只有当我将其放在formatoptions中时才有效。但是对于删除，我不关心我是否将其放入/放出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);
}
更改列名等以确保安全性（显而易见）。这是我的JS。我必须在function中使用jqGrid并获取identifier作为参数，因为我有一个加载到Iframe中的JSP，并且JSP有另一个加载此JS的Iframe。我需要发送我在JSP中收到的identifier来构建网格。我找到的最好方法是。
这是identifier值。
此外，我需要identifier和row_id来更新数据，因为我有3个主键来标识特定项目。我需要identifier，父row_id和我正在编辑的实际row_id。最后一个我从JSON格式的JS对象中获取它。
它不会识别editOptions属性，因为它不会获得keys: true。它不允许我使用Enter键接受编辑。
如果您仍需要更多信息，请询问。
1 个答案:
答案 0 :(得分：5)
我认为问题的根源是对formatter: 'actions'如何运作的误解。
jqGrid支持树editing mode：inline editing，form editing和cell editing。如果您未在editformbutton: true内使用formatter: 'actions' formatoptions选项，则“编辑”按钮将使用内联编辑。删除按钮始终使用表单编辑，因为内联编辑模块中没有删除方法。
因此，如果您在editOptions的{{1}}的{{1}}内包含一些选项，那么它应该是editRow的选项（请参阅formatoptions对象的属性在文档中）。所以你可以指定例如
formatter: 'actions'但此处将忽略editparameters。 editOptions: {
url: url,
mtype: "POST", // is already default and can be removed
keys: true
}
可用于更改ajaxEditOptions的默认值，这是版式编辑的一部分，但要更改默认值$.jgrid.edit，您需要使用editGridRow。
editRow允许您指定delGridRow的参数。您的问题的更新部分使用了正确的选项。所以删除操作正常。
顺便说一下，您可以使用jqGrid的<{1}} 选项来指定用于内联编辑和表单编辑的URL。因此，$.jgrid.inlineEdit在一个地方会更好，因为多次指定delOptions。
成功编辑需要做的是将editurl和editurl: url 添加为jqGrid选项
url: url或将其设置为ajaxRowOptions。
更新：您误解了唯一身份证的价值。 HTML标准不允许在页面上具有两个具有相同serializeRowData属性的元素。您提出的演示不会在子网格中使用ajaxRowOptions: { contentType: "application/json", dataType: "json" },
serializeRowData: function (data) { return JSON.stringify(data); }
。如果您打开哪些行的子网格并检查与开发人员工具相关的页面的HTML代码（在IE中按 F12 ），您将看到以下内容
所以你必须使用 $.jgrid.defaults来表示子网格。我建议你使用取决于父网格的rowid的值（类似id）。请查看here以获取有关该主题的更多答案。
更新2 ：我再次查看了idPrefix的代码，我发现它使用 formatter 的idPrefix选项进行内嵌编辑操作（请参阅the documentation）并使用idPrefix: "s_" + row_id + "_"进行删除，使用formatter: "actions"进行表单编辑。因此，只有在您使用url选项时才会使用delOptions。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？