添加新行

Question

我目前正在使用free-jqGrid版本4.14.1（使用cdn超链接）。我想让用户添加一个带有输入值的新行，如果要通过单击该行进行任何更改，请编辑该行。为了添加新行，我创建了一个添加按钮（不使用jqGrid寻呼机）。

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

1）我提到this demo进行内联编辑。根据这个演示代码，我需要使用

行

grid.jqGrid('restoreRow', lastSelection);

但是，对于这一行，每次我添加新行时，前一行都会被删除，只显示新添加的行。请检查this fiddle。

2）由于1），我评论了那条线（我不认为我应该这样做才能正常运作），并试图跑。添加新行后，之前添加的行仍然存在，但显示的所有行都显示在文本框中，如(fiddle)：

我想要的只是在用户点击要修改的行之后，它才会更改为文本框，如guriddo演示。

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

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

添加：

我开始使用一些基表值来进行验证。基本数据行按我的意愿运行（单击要修改的行），但新行不是。当我点击时，似乎没有选择新行并且没有聚焦，并且在按下回车键后没有退出编辑模式..

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

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

以下是网格代码仅供参考：

$(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感谢this fiddle的所有者，因为我正在努力将代码移动，并且因为我丢失了原来的答案链接而没有解决他/她的抱歉......）

Answer 1

我最后只是在添加新行后重新加载整个网格。它工作正常，除了新添加的行没有转向编辑模式，因为它没有检测用户是否点击它，因为它在创建时已经突出显示..

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

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

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