Jqgrid das hinzufügen von neuen leeren Zeile in der inlineNav Stil

Möchte ich Add Edit Save Und Delete button meine JqGrid.

<script type="text/javascript">
jQuery(document).ready(function () {
    var lastSel = 0;
    jQuery("#list").jqGrid({
        url: '/SpeakerJqgrid/GridData/',
        editurl: "/SpeakerJqgrid/MyEdit/",
        datatype: 'json',
        mtype: 'GET',
        colNames: ['SpeakerID', 'SpeakerName'],
        colModel: [
                      { name: 'SpeakerID', index: 'SpeakerID', width: 40, align: 'left', editable: true, edittype: "text", editoptions: { size: "35", maxlength: "50"} },
                      { name: 'SpeakerName', index: 'SpeakerName', width: 200, align: 'left', editable: true, edittype: "text", editoptions: { size: "35", maxlength: "50"} }
                 ],
        onSelectRow: function (id) {
            if (id && id !== lastSel) {
                jQuery('#list').restoreRow(lastSel);
                lastSel = id;
            }
            jQuery('#list').editRow(id, true);
        },
        loadComplete: function () {
            //alert("Load Complete");
        },
        addRowData: function (rowid, rdata, pos, src) {
            alert("addRowData");
            if (pos === 'afterSelected' || pos === 'beforeSelected') {
                if (typeof src === 'undefined' && this[0].p.selrow !== null) {
                    src = this[0].p.selrow;
                    pos = (pos === "afterSelected") ? 'after' : 'before';
                } else {
                    pos = (pos === "afterSelected") ? 'last' : 'first';
                }
            }
            return oldAddRowData.call(this, rowid, rdata, pos, src);
        },

        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: 'SpeakerName',
        sortorder: "desc",
        viewrecords: true,            
        autowidth: true,
        autoheight: true,
        imgpath: '/scripts/themes/black-tie/images',
        caption: 'My first grid'
    })
    $("#list").jqGrid('navGrid', '#pager', {edit:false,add:false,del:false,refresh:false,search:false});
    $("#list").jqGrid('inlineNav', '#pager', {
        edittext: "Edit",
        addtext: "Add",
        savetext: "Save",
        canceltext: "Cancel",
        addParams: { position: "afterSelected" }
    });
    }); 
</script>

Durch die Verwendung von oberen code, Mein Raster zeigen Sie mir-buttons aufgerufen Add Edit Save Und Delete.

Aber, was problem ist wenn ich klicken Sie auf diese Schaltflächen, nichts passieren.

Ich meine, möchte ich eine Veranstaltung erstellen, die ausgelöst wird, wenn ich auf Hinzufügen oder Bearbeiten klicken.

Meisten der Beispiele, die ich gefunden habe ist über das hinzufügen von neuen Zeilen mit modal form. Aber was muss ich verwenden, ist inline-grid-Zeile hinzufügen von Stil.

Ihre Anregungen werden geschätzt.

  • trirand.com/blog/jqgrid/jqgrid.html Zeile Bearbeiten -> Benutzerdefiniert Bearbeiten " im linken Menü
  • Danke für deinen Vorschlag @laroslav. Ich habe festgestellt bei Zeile Bearbeiten (neu)--> Inline-Navigator - (neu).Aber ich weiß immer noch nicht finden js-event feuern, wenn ich auf das " + " - Taste.
  • bei Custom Bearbeiten Beispiel können Sie sehen, dass diese Tasten angebracht, um jede Zeile für code siehe gridComplete Veranstaltung
  • Sorry, wollte nicht sehen, Wort 'unten' am Anfang des Satzes.
InformationsquelleAutor Frank Myat Thu | 2012-03-05
  1. 5

    Zunächst einmal gibt es keine callback-Funktion addRowData. Wenn Sie ändern möchten die Methode addRowData zur Unterstützung der "afterSelected' oder 'beforeSelected' sollten Sie meinem Vorschlag aus die Antwort oder diese eine mit die demo.

    Nun zu Ihren wichtigsten Frage. Die inlineNav Methode verwendet intern addRow und editRow Methoden. Also, wenn der Benutzer klicken Sie auf "Hinzufügen" oder "Bearbeiten" - button Hinzugefügt von inlineNav die addRow oder editRow aufgerufen werden. Sie können addParams und editParams Optionen inlineNav zum ändern der default Parameter von addRow oder editRow. Wenn Sie müssen nur geben Sie Ihre eigene callback-Funktion wird aufgerufen, wenn der Benutzer klicken Sie auf Hinzufügen oder Bearbeiten-Schaltfläche Sie können den folgenden code verwenden:

    $("#list").jqGrid('inlineNav', '#pager', {
    edittext: "Edit",
    addtext: "Add",
    savetext: "Save",
    canceltext: "Cancel",
    addParams: {
        position: "afterSelected",
        addRowParams: {
            //the parameters of editRow used to edit new row
            keys: true,
            oneditfunc: function (rowid) {
                alert("new row with rowid=" + rowid + " are added.");
            }
        }
    },
    editParams: {
        //the parameters of editRow
        key: true,
        oneditfunc: function (rowid) {
            alert("row with rowid=" + rowid + " is editing.");
        }
    }
});

    Außerdem sollte man wohl den code entfernen der die onSelectRow Rückruf, wenn Sie müssen, verwenden Sie Bearbeiten-Schaltfläche inlineNav.

    • Vielen Dank @Oleg, Endlich, Ihre Anregungen und code mein problem gelöst.
    • Meine Lösung funktioniert nur, wenn sich die position: "afterSelected" entfernt. Warum?
    • Ich nehme an, weil Sie nicht Hinzugefügt modifizierte version von addRowData (siehe die Antwort verwiesen, in der aktuellen meine Antwort).
    InformationsquelleAutor Oleg
Schreibe einen Kommentar