2

我正在尝试使用列进行内联编辑，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'
        }
    }
}}

但仍然无法正常工作：SI 不知道我做错了什么。如果你能帮助我，我将不胜感激。

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&aacute;lido.<br/>Por favor, introduzca una hora en un formato <b>hh:mm</b> v&aacute;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。我必须在 a 中使用 jqGridfunction并identifier作为参数获取，因为我有一个加载到 Iframe 中的 JSP，并且该 JSP 有另一个加载此 JS 的 Iframe。我需要发送identifier我在 JSP 中收到的内容来构建网格。我发现的最好的方法就是这样。这就是identifier价值。

另外，我需要它identifier和row_id更新数据，因为我有 3 个主键来识别特定项目。我需要identifier，父母row_id和实际row_id我正在编辑。最后一个我从 JSON 格式的 JS 对象中得到它。

就像它不识别editOptions属性一样，因为它没有得到keys: true. 它没有让我接受带有Enter密钥的编辑。

如果您仍需要更多信息，请询问。

4

1 回答 1

5

我认为您的问题的根源是对formatter: 'actions'工作原理的误解。

jqGrid支持的树型主编辑模式有：内联编辑、表单编辑和单元格编辑。如果您不使用inside ofeditformbutton: true选项，则 Edit 按钮将使用内联编辑。删除按钮总是使用表单编辑，因为内联编辑模块中没有删除方法。formatter: 'actions'formatoptions

因此，如果您在 of 中包含一些选项editOptions，formatoptions那么formatter: 'actions'它应该是editRow的一个选项（请参阅editparameters文档中对象的属性）。所以你可以指定例如

editOptions: {
    url: url,
    mtype: "POST", // is already default and can be removed
    keys: true
}

但ajaxEditOptions这里将被忽略。$.jgrid.edit可用于更改editGridRow作为表单编辑一部分的默认值，但要更改editRow您需要使用的默认值$.jgrid.inlineEdit。

delOptions允许您指定delGridRow的参数。您问题的更新部分使用正确的选项。所以删除操作可以正常工作。

顺便说一句，您可以使用editurl jqGrid 的选项来指定用于内联编辑和表单编辑的 URL。因此，在一个地方指定多次editurl: url会更好。url: url

成功编辑需要做的是添加ajaxRowOptions和serializeRowData 作为 jqGrid 选项

ajaxRowOptions: { contentType: "application/json", dataType: "json" },
serializeRowData: function (data) { return JSON.stringify(data); }

或将其设置在$.jgrid.defaults.

更新：您误解了唯一 ID 的值。HTML 标准不允许id页面上有两个具有相同属性的元素。您提出的演示不在idPrefix子网格中使用。如果您打开谁行的子网格并使用开发人员工具检查页面的 HTML 代码（F12在 IE 中按），您将看到以下内容

在此处输入图像描述

所以你必须使用 idPrefix子网格。我建议您使用取决于父网格的 rowid 的值（类似于idPrefix: "s_" + row_id + "_"）。在这里查看我对这个主题的更多回答。

更新 2：我formatter: "actions"又查看了一次代码，发现它使用格式化程序url选项进行内联编辑操作（请参阅文档）并用于删除和表单编辑。仅当您使用选项时才会使用。delOptionseditOptionseditOptions.urleditformbutton: true

于 2013-04-17T08:56:24.580 回答