jqGrid发送编辑/删除内联信息序列化的JSON格式

时间:2013-04-17 08:09:43

标签: javascript json api jqgrid

我正在尝试使用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&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。我必须在function中使用jqGrid并获取identifier作为参数,因为我有一个加载到Iframe中的JSP,并且JSP有另一个加载此JS的Iframe。我需要发送我在JSP中收到的identifier来构建网格。我找到的最好方法是。 这是identifier值。

此外,我需要identifierrow_id来更新数据,因为我有3个主键来标识特定项目。我需要identifier,父row_id和我正在编辑的实际row_id。最后一个我从JSON格式的JS对象中获取它。

它不会识别editOptions属性,因为它不会获得keys: true。它不允许我使用Enter键接受编辑。

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

1 个答案:

答案 0 :(得分:5)

我认为问题的根源是对formatter: 'actions'如何运作的误解。

jqGrid支持树editing modeinline editingform editingcell editing。如果您未在editformbutton: true内使用formatter: 'actions' formatoptions选项,则“编辑”按钮将使用内联编辑。删除按钮始终使用表单编辑,因为内联编辑模块中没有删除方法。

因此,如果您在editOptions的{​​{1}}的{​​{1}}内包含一些选项,那么它应该是editRow的选项(请参阅formatoptions对象的属性在文档中)。所以你可以指定例如

formatter: 'actions'

但此处将忽略editparameterseditOptions: { 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

成功编辑需要做的是将editurlediturl: url 添加为jqGrid选项

url: url

或将其设置为ajaxRowOptions

更新:您误解了唯一身份证的价值。 HTML标准不允许在页面上具有两个具有相同serializeRowData属性的元素。您提出的演示不会在子网格中使用ajaxRowOptions: { contentType: "application/json", dataType: "json" }, serializeRowData: function (data) { return JSON.stringify(data); } 。如果您打开哪些行的子网格并检查与开发人员工具相关的页面的HTML代码(在IE中按 F12 ),您将看到以下内容

enter image description here

所以你必须使用 $.jgrid.defaults来表示子网格。我建议你使用取决于父网格的rowid的值(类似id)。请查看here以获取有关该主题的更多答案。

更新2 :我再次查看了idPrefix的代码,我发现它使用 formatter idPrefix选项进行内嵌编辑操作(请参阅the documentation)并使用idPrefix: "s_" + row_id + "_"进行删除,使用formatter: "actions"进行表单编辑。因此,只有在您使用url选项时才会使用delOptions