jqGrid senden bearbeitet/gelöscht inline Informationen serialisierten JSON-format

Ich versuche zu tun, eine inline-Bearbeiten mit einer Spalte mit formatter: 'actions' wollen und senden die Informationen an den server im JSON-format, aber ich kann nicht. Ich habe schon viele Dinge versucht, aber keine Ergebnisse. Noch senden von Informationen ohne serialisieren.

Habe auch versucht $.extend($.jgrid.edit, (...)); bei der Initialisierung $(function(){...}); ohne Ergebnis.

Meine formatoptions sieht wie folgt aus:

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'
        }
    }
}}

Aber immer noch nicht funktioniert :S ich weiß nicht was ich falsch mache.
Ich würde schätzen, wenn Sie mir helfen.

PS: ich writted zu viele url-Eigenschaften, denn ich war die überprüfung, wo ich habe, es zu schreiben, es zu tun zu arbeiten. Um Sie zu Bearbeiten, funktioniert nur wenn ich die url aus der editOptions, nur wenn ich es in formatoptions. Aber für löschen, die es nicht kümmert, wenn ich es in/out delOptions einschließlich ajaxDelOptions. Wenn Ihr mir helfen könntet auch mit, ich würde schätzen.


AKTUALISIERT

Löschen funktioniert einwandfrei mit dieser Konfiguration, aber inline-editing speichern-button immer noch nicht funktioniert. Ich klebte die gleiche config, ändern von Optionen für die Bearbeitung und immer noch nicht funktioniert.

delOptions: {
    url: url,
    mtype: 'POST',
    reloadAfterSubmit: true,
    ajaxDelOptions: {
        contentType: "application/json"
    },
    serializeDelData: function(postdata) {
        return JSON.stringify(postdata);
    }
}


AKTUALISIERT 2

Hier ist mein 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);
}

Geänderte Spalte, Namen, etc. zur Sicherheit (obviusly). Dies ist mein JS. Ich musste jqGrid in einem function und immer identifier als parameter, da habe ich eine JSP-Datei, die geladen wird in ein Iframe und das JSP hat ein anderes Iframe lädt das JS. Ich brauchte zum senden der identifier dass ich erhalten in die JSP zu bauen das raster. Der beste Weg, ich fand, ist, dass.
Das ist die identifier Wert.

Auch, ich brauche das identifier und die row_id um die Daten zu aktualisieren, weil ich habe 3 primäre Schlüssel zu identifizieren, die ein bestimmtes Element. Ich brauche identifier, Eltern row_id und tatsächlichen row_id dass ich Bearbeiten. Letzte, den ich erhalten Sie von der JS-Objekt in JSON-format.

Es ist wie es nicht erkennt editOptions Eigenschaft, weil es nicht keys: true. Es ließ mich nicht akzeptieren, das Bearbeiten mit Enter - Taste.

Wenn Sie braucht noch mehr Informationen, einfach Fragen.

InformationsquelleAutor DaGLiMiOuX | 2013-04-17
Schreibe einen Kommentar