Jqgrid добавляет новую пустую строку в стиле inlineNav

Question

Я хотел бы создать кнопку Add Edit Save И Delete под моей 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>

Используя верхний код, My Grid показывает мне кнопки, называемые Add Edit Save И Delete.
Но какая проблема, когда я нажимаю эти кнопки, ничего не происходит.

Я имею в виду, что я хотел бы создать событие, которое будет срабатывать при нажатии кнопки «Добавить» или «Редактировать».

Большинство примеров, которые я нашел, касается добавления новых строк с использованием модальная форма . Но я должен использовать стиль добавления строк встроенной сетки.

Ваши предложения будут оценены.

Answer 1

Прежде всего, нет функции обратного вызова addRowData.Если вы хотите изменить метод addRowData для поддержки 'afterSelected' или 'beforeSelected', вы должны следовать моему предложению от ответа или этого с демо .

Теперь о вашем главном вопросе.Метод inlineNav , используемый внутренне addRow и editRow методы.Поэтому, если пользователь нажимает кнопку «Добавить» или «Редактировать», добавленную inlineNav , будет вызван addRow или editRow .Вы можете использовать addParams и editParams опции inlineNav , чтобы изменить параметры по умолчанию addRow или editRow .Если вам просто нужно указать свою собственную функцию обратного вызова, которая будет вызываться при нажатии пользователем кнопки «Добавить» или «Изменить», вы можете использовать следующий код:

$("#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.");
        }
    }
});

Кроме того, вам, вероятно, следует удалить код * 1037.* обратный вызов, если вам нужно использовать кнопку редактирования inlineNav.