jquery - 保存/提交时重新加载 jqGrid

Question

我有以下代码可以在双击时进入内联编辑:

ondblClickRow: function (row_id) {
            if(row_id != null) {
                    $('#Products').jqGrid('restoreRow',last_selected_row);
                    $('#Products').jqGrid('saveRow',row_id);
                    $("#Products").jqGrid('editRow',row_id, true, null, 
                        function(){ $("#Products").trigger("reloadGrid", [{current: true}]); }, 
                        'xtras/Products.php', 
                        null,{},
                        {},{}
                    );
                    $("#Products_ilsave").removeClass('ui-state-disabled');
                    $("#Products_ilcancel").removeClass('ui-state-disabled');
                    $("#Products_ilcancel").removeClass('ui-state-disabled');
                    $("#Products_ilcopy").addClass('ui-state-disabled');
                    $("#Products_iladd").addClass('ui-state-disabled');
            } 
        }

和导航定义:

$("#Products").jqGrid("navGrid", "#Products_pager",
            {search: true, add: false, edit: false, del: true, refreshstate: "current"},
            {},
            {},
            {},
            {},
            {sopt:['eq','ne','cn','bw','bn','ge','le','lt','gt'], multipleSearch:true, showQuery: false}
        )
    .jqGrid("inlineNav", "#Products_pager",
        {add: true, edit: true},
    )
    .navButtonAdd('#Products_pager',{
        caption:"", 
        title:"Copy selected row",
        id:"Products_ilcopy", 
        buttonicon:"ui-icon-copy", 
        onClickButton: function(){
            var srcrowid = $grid.jqGrid('getGridParam', 'selrow');

            if (srcrowid > 0) {
                $('#Products_iladd').click();
                var rowData = $('#Products').jqGrid('getRowData', srcrowid);
                rowData.ID = '';
                rowData.Catalogue = '';
                rowData.UPCEAN = '';
                rowData.copyID = srcrowid;
                $grid.jqGrid('setRowData', 'new_row', rowData);
                var ondblClickRowHandler = $('#Products').jqGrid("getGridParam", "ondblClickRow");
                ondblClickRowHandler.call($("#Products")[0], 'new_row');
            } else {
                alert('Please select a row to copy');
                return false;
            }
        }, 
        position:"last"
    });

正如您所看到的，当我单击“复制”按钮时，会创建一个新行，并调用 ondblClickRow 来进入内联编辑。如果我单击 navGrid 中的“保存”按钮 - 它会保存但不会重新加载。如果我按 Enter 键 - 它会重新加载，但不会保存任何内容。

之后如何保存并重新加载网格？

--------------更新--------------------

添加、编辑、删除、复制 - 全部相同的 URL - 'xtras/Products.php'

url:'xtras/Products.php',
editurl:'xtras/Products.php',
datatype: "json",
mtype:'GET',

$('#Products') - 是页面上唯一的网格

使用 - jqGrid 4.4.2

Answer 1

当前代码中的主要问题如下:您使用 reloadGrid 指定回调仅用于 editRow 的一次直接调用。另一方面，您使用 inlineNav，其中有 另外两个调用 editRow:一个是单击“编辑”按钮，另一个是单击“添加”按钮。在这种情况下，您将无需重新加载网格。 “复制所选行”按钮的实现中还存在一些其他问题。所以我决定重写您使用的代码。结果代码如下所示

var editOptions = {
        keys: true,
        aftersavefunc: function() {
            var $self = $(this);
            setTimeout(function () {
                $self.trigger("reloadGrid", [{current: true}]);
            }, 50);
        },
        url: "xtras/Products.php"
    },
    gridIdSelector = "#Products",
    pagerIdSelector = "#Products_pager",
    $grid = $(gridIdSelector);

$.extend($.jgrid.search, {
    sopt: ["eq", "ne", "cn", "bw", "bn", "ge", "le", "lt", "gt"],
    multipleSearch: true
});

// create the grid
$grid.jqGrid({
    ...
    pager: pagerIdSelector,
    ondblClickRow: function (rowid) {
        var $self = $(this),
            savedRows = $self.jqGrid("getGridParam", "savedRow");

        if (savedRows.length > 0 && savedRows[0].id !== rowid) {
            // cancel editing of another row is editing
            // don't cancel on double click on the current editing
            $self.jqGrid("restoreRow", savedRows[0].id);
        }
        if (savedRows.length === 0) {
            $self.jqGrid("editRow", rowid, editOptions);
        }
    }
})
.jqGrid("navGrid", pagerIdSelector, {add: false, edit: false, refreshstate: "current"})
.jqGrid("inlineNav", pagerIdSelector, { editParams: editOptions, addParams: {addRowParams: editOptions}})
.jqGrid("navButtonAdd", pagerIdSelector, {
    caption: "",
    title: "Copy selected row",
    id: $grid[0].id + "_ilcopy", 
    buttonicon: "ui-icon-copy",
    onClickButton: function () {
        var $self = $(this), p = $self.jqGrid("getGridParam"), rowData,
            srcrowid = p.selrow, savedRows = p.savedRow;

        if (srcrowid !== null) {
            if (savedRows.length > 0) {
                // cancel editing
                $self.jqGrid("restoreRow", savedRows[0].id);
            }
            rowData = $self.jqGrid("getRowData", srcrowid);
            rowData.ID = "";
            rowData.Catalogue = "";
            rowData.UPCEAN = "";
            rowData.copyID = srcrowid;
            $self.jqGrid("addRow", {
                initdata: rowData,
                addRowParams: editOptions 
            });
        } else {
            alert("Please select a row to copy");
            return false;
        }
    }
});

// Enable/disable buttons on start/end of editing
$grid.bind("jqGridInlineEditRow jqGridInlineAfterSaveRow jqGridInlineAfterRestoreRow", function () {
    var $self = $(this),
        savedRows = $self.jqGrid("getGridParam", "savedRow");
    if (savedRows.length > 0) {
        // some row is editing now
        $(gridIdSelector + "_ilsave," + gridIdSelector + "_ilcancel").removeClass("ui-state-disabled");
        $(gridIdSelector + "_ilcopy," + gridIdSelector + "_iladd," + gridIdSelector + "_iledit").addClass("ui-state-disabled");
    } else {
        // No row is editing now
        $(gridIdSelector + "_ilsave," + gridIdSelector + "_ilcancel").addClass("ui-state-disabled");
        $(gridIdSelector + "_ilcopy," + gridIdSelector + "_iladd," + gridIdSelector + "_iledit").removeClass("ui-state-disabled");
    }
});

您可以看到我定义了一个对象 editOptions，稍后我将其用作所有情况的 editRow 选项。另外，我使用 jqGrid 的 savedRow 参数，它保存有关当前编辑(相对于内联或单元格编辑)行的信息。如果 savedRow 是空数组，则现在没有正在编辑的行。如果不为空，则数组项的 id 属性包含编辑行的 rowid。我另外还直接调用“复制所选行”按钮的 onClick 处理程序内的 addRow 方法。