添加新行后，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");