添加新行后，jqGrid内联编辑不起作用

Question

我当前正在使用free-jqGrid版本4.14.1（使用CDN超链接）。 我想让用户使用其输入值添加一个新行，如果他们想通过单击该行进行任何更改，请对其进行编辑。 为了添加新行，我创建了一个添加按钮（不使用jqGrid分页器）。

我现在面临两个不同的问题：

1）我参考了此演示进行内联编辑。 根据此演示代码，我需要使用该行

grid.jqGrid('restoreRow', lastSelection);

但是，在这一行中，每次我添加新行时，都会删除前一行，并且仅显示新添加的行。 请检查这个小提琴 。

2）由于1），我注释掉了该行（我认为我不应该为了正常运行而这样做），并尝试运行。 在添加新行之后，先前添加的行仍然保留，但是显示的所有行都显示在文本框中，如下所示（小提琴） ：

我只想在用户单击要修改的行后才将其更改为类似于guriddo演示的文本框。

我尚未找到与此问题相关的任何帖子。 有没有人请帮助我？

===========================================

加：

我从一些基本表值开始，仅用于验证。 基本数据行正在按我的要求运行（单击要修改的行），但是新行却没有。 当我单击时，似乎未选择新行且未将焦点对准，并且在按Enter键后未退出编辑模式。

===========================================

===========================================

下面是网格代码，仅供参考：

$(document).ready(function () {

        Load_Bin();

        $('#Bin-QtyBin').focus();
        $('#btnEnter-Bin').click(function () {

                var valNumBin = $('#Bin-numBin').val();
                //if bins are dropbox: select enabled one

                var valQtyBin = $('#Bin-QtyBin').val();


                var paramRow = {
                    rowId: "new_row",
                    initdata: {
                        numBin: valNumBin,
                        QtyPutAway: valQtyBin
                    },
                    position: "first" //"last"
                }

                $("#tbBin").jqGrid('addRow', paramRow);
                $('#Bin-numBin').val('');
                $('#Bin-QtyBin').val('');

        });
});
    var lastSelection;

    function Load_Bin() {
        var tbBinArea = $('#tbBin');
        tbBinArea.jqGrid({
            datatype: "local",
            colModel: [
                { label: 'Bin', name: 'numBin', sorttype: 'text', searchoptions: { clearSearch: true }, width: 310, editable: true },
                { label: 'Put Away Qty.', name: 'QtyPutAway', sorttype: 'number', searchoptions: { clearSearch: true }, width: 310, editable: true }],
            rowNum: 10,
            rowList: [10, 15, 30, "10000:All"],
            prmNames: {
                page: 'defaultPageNumber',
                rows: 'rowsPerPage'
            },
            //forceClientSorting: true,
            rownumbers: true,
            //autowidth: true,
            viewrecords: true,
            loadonce: true,
            multiselect: false,
            multiPageSelection: false,
            iconSet: "fontAwesome",
            pager: true,
            height: 250,
            onSelectRow: editRow, 
            searching: {
                searchOperators: true,
                defaultSearch: 'cn',
                closeOnEscape: true,
                searchOnEnter: false,
                multipleSearch: true
            }
        });

    }


    function editRow(id) {

        if (id && id !== lastSelection) {
            var grid = $("#tbBin");
            grid.jqGrid('restoreRow', lastSelection);
            grid.jqGrid('editRow', id, { keys: true });
            lastSelection = id;
        }
    };

（ps感谢此小提琴的所有者，因为我一直在努力将代码移到小提琴，并且由于我丢失了该小提琴的原始答案链接而未能与他/她联系，所以感到抱歉...）

Answer 1

我最终只是在添加新行后重新加载整个网格。 它可以正常工作，但新添加的行不会变为编辑模式，因为它不会检测用户是否单击它，因为它在创建时已被突出显示。

创建新行后，只需添加以下代码：

            var reloaddata = $('#tbBin').jqGrid("getGridParam", "data");

            $('#tbBin')
                .jqGrid('setGridParam',
                {
                    datatype: 'local',
                    data: reloaddata
                })
                .trigger("reloadGrid");