在jqGrid的风格inlineNav添加新的空行 [英] Jqgrid adding new blank row in inlineNav style

问题描述

我想创建添加 修改 保存和删除下面我的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>

通过使用上code，我的网给我看的按钮名为添加 修改 保存和删除。结果
但问题是，当我点击这些按钮，没有发生。

By using upper code, My Grid show me buttons called Add Edit Save And Delete.
But what problem is when I click those buttons, nothing happen.

我的意思是，我想，当我点击添加或编辑按钮创建活动，将激发。

I mean that I would like to create event which will fire when I click Add or Edit button.

大部分时间我发现用模态有关添加新行的例子形成。但我必须使用内联是网格行添加样式。

Most of the examples I found is about adding new rows by using modal form. But what I have to use is inline grid row adding style.

您的建议将成为AP preciated。

Your suggestions will be appreciated.

推荐答案

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

First of all there are no callback function addRowData. If you want to modify the method addRowData to support 'afterSelected' or 'beforeSelected' you should follow my suggestion from the answer or this one with the demo.

现在你的主要问题。内部使用的 inlineNav 方法的addRow 并的 editRow 方法。所以，如果添加或编辑按钮，以 inlineNav addRow 或的 editRow 将被调用。您可以使用的 addParams 和 editParams 选项/doku.php?id=wiki%3ainline_editing#inlinenav\">inlineNav 改变的 addRow 或 editRow 。如果你只需要指定自己的回调函数将被调用时，在用户点击添加或编辑按钮，您可以使用下面的code：

Now about your main question. The inlineNav method used internally addRow and editRow methods. So if the user click on "Add" or "Edit" button added by inlineNav the addRow or editRow will be called. You can use addParams and editParams options of inlineNav to change the default parameters of addRow or editRow. If you just need to specify your own callback function which will be called when the user click on Add or Edit button you can use the following code:

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

此外，你或许应该删除 onSelectRow 回调code。如果你需要使用 inlineNav 。

Additionally you should probably remove the code of the onSelectRow callback if you need to use Edit button of inlineNav.

这篇关于在jqGrid的风格inlineNav添加新的空行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！