Jqgrid在inlineNav样式中添加新的空白行

本文关键字：空白 添加 inlineNav 样式 Jqgrid | 更新日期: 2023-09-27 18:26:36

我想在JqGrid下面创建Add Edit Save和Delete按钮。

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

通过使用上面的代码，"我的网格"显示名为Add Edit Save和Delete的按钮
但问题是，当我点击这些按钮时，什么也没发生。

我的意思是，我想创建一个事件，当我单击"添加"或"编辑"按钮时会触发。

我发现的大多数例子都是关于使用模态形式添加新行的。但我必须使用的是内联网格行添加样式。

您的建议将不胜感激。

Jqgrid在inlineNav样式中添加新的空白行

首先没有回调函数addRowData。如果你想修改方法addRowData以支持"afterSelected"或"beforeSelected"，你应该遵循我的建议，从答案或这个例子到演示。

现在谈谈你的主要问题。inlineNav方法在内部使用addRow和editRow方法。因此，如果用户点击inlineNav添加的"添加"或"编辑"按钮，就会调用addRow或editRow。您可以使用inlineNav的addParams和editParams选项来更改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.");
        }
    }
});

此外，如果您需要使用inlineNav的Edit按钮，您可能应该删除onSelectRow回调的代码。

相关文章：