保存/提交时重新加载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"
    });

正如您所看到的,当我单击COPY按钮时,会创建一个新行并ondblClickRow调用以进行内联编辑.如果我点击SAVE按钮navGrid- 它会保存但不会重新加载.如果我点击Enter键 - 它重新加载,但不保存任何东西.

请问如何保存并重新加载网格？

-------------- UPDATE ---------------------

添加,编辑,删除,复制 - 所有相同的网址 - '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另外，我使用savedRowjqGrid 的参数，它保存有关当前编辑（相对于内联或单元格编辑）行的信息。如果savedRow是空数组，则现在没有正在编辑的行。如果不为空则id数组的item属性包含编辑行的rowid。addRow我还使用“复制所选行”按钮的 onClick 处理程序内部的方法直接调用。