jquery - jqGrid：删除最后一条记录不会刷新网格+分页问题

Question

我在 jqGrid 中有两个问题

1）假设表中有 91 条记录，rownum 设置为 10，现在当我导航到最后一页并删除记录号 91 时，它不会自动重新加载网格，当我明确使用 ReloadGrid 时，它会重新加载整个数据控制器增加了网络负载。

2）在我的网格中有 10 页，当我在文本框中输入大于最大页面的页码时，它会给出空白网格，理想情况下它应该显示一些消息。

任何解决方案？

添加代码以更好地理解问题

$(document).ready(function () {
        $('#jqgCars').jqGrid({
            //url from wich data should be requested
            url: '@Url.Action("CarsListing", "Car")?Carid=' + getID(),
            //event for inline edit
            onSelectRow: function (currentSelectedRow) {
                if (currentSelectedRow && currentSelectedRow != $.lastSelectedRow) {
                    //save changes in row 
                    $('#jqgCars').jqGrid('saveRow', $.lastSelectedRow, false);
                    $.lastSelectedRow = currentSelectedRow;
                }
            },
            //type of data
            datatype: 'json',
            //url access method type
            mtype: 'POST',
            //columns names
            colNames: ['ID','Number','Name'],
            //columns model
            colModel: [
                            { name: 'ID', index: 'ID', align: 'left', editable: false },
                            { name: 'Number', index: 'Number', align: 'left', editable: true, formatter: "text", edittype: 'text', editrules: { required: true}, editoptions:{maxlength:"25"}},
                            { name: 'Name', index: 'Name', align: 'left', editable: true, formatter: "text", edittype: 'text', editrules: { required: false} , editoptions:{size:"35",maxlength:"255"}},
                          ],
            //pager for grid
            pager: $('#jqgpCars'),
            //number of rows per page
            rowNum: 2,
            //initial sorting column
            sortname: 'name',
            //initial sorting direction
            sortorder: 'asc',
            //display total records count
            viewrecords: true,
            //grid height
            height: '100%' 
        });
        $('#jqgCars').jqGrid('navGrid', '#jqgpCars', { add: true, del: true, edit: true, search: false });
        $('#jqgCars').jqGrid('hideCol', "ID");
        $('#jqgCars').setGridWidth(600 , true);
        var dialogPosition = $(this).offset();
    });

更新——解决方案

解决问题#1

$.extend($.jgrid.del, {
            afterComplete: function () {
                var p = $('#jqgCars')[0].p;
                var newPage = p.page; // Gets the current page
                if (p.reccount === 0 && newPage > p.lastpage && newPage > 1) {
                    // if after deleting there are no rows on the current page and lastpage != firstpage than
                    newPage--; // go to the previous page
                }
                // reload grid to make the row from the next page visable.
                $(p.pager + " input.ui-pg-input").val(newPage); //Here setting the new page into textbox before loading in case of longer grid it would look nice
                $('#jqgCars').trigger("reloadGrid", [{page: newPage}]); // reloading grid to previous page
            } 
        });

问题#2 的解决方案与Oleg 发布的完全相同

这适用于 jqGrid v4.1.2

Answer 1

这是个好问题！在旧答案中this和this您将找到第一个问题的答案。因为答案很长，并且您需要在服务器上使用删除数据，所以我在这里重复相同的想法。

在一个问题中提出两个不同的问题是不好的。这样的问题不适合搜索引擎。遇到问题第 2 部分的问题的用户将不得不阅读不需要的信息。所以请不要在未来这样做。

我从你的第二个问题开始回答。如果用户在寻呼机的输入部分键入任何值并按下Enter页面的行，将从服务器或本地数据集请求。如果用户选择大页码，网格将成功重新加载，但没有数据。在从最后一页删除最后一行的情况下，结果完全相同。具有相同编号的页面将被重新加载，用户将看到空网格。

要解决此问题，可以使用以下onPaging回调：

onPaging: function (pgButton) {
    var p = this.p;
    if (pgButton === "user" && p.page > p.lastpage) {
        alert ("You can't choose the page " + $(p.pager + " input.ui-pg-input").val());
        p.page = p.currentPage; // restore the value of page parameter
        return 'stop';
    }
},
loadComplete: function () {
    // because on enter in the pager input the value of this.p.page
    // will be changed BEFORE calling of the onPaging the original
    // (current) page number will be overwritten. To save the problem
    // we can save somewhere the copy of the this.p.page. To be able
    // easy to maintain multiple grids on the page we can save the
    // copy as new jqGrid option:
    this.p.currentPage = this.p.page;
}

不是我们回到你问题的第一部分。为了解决这个问题，可以使用delGridRow方法的afterComplete回调在最后一行被删除后执行附加操作。代码可以如下：

afterComplete: function () {
    var p = this.p, newPage = p.page;
    if (p.lastpage > 1) {// on the multipage grid reload the grid
        if (p.reccount === 0 && newPage === p.lastpage) {
            // if after deliting there are no rows on the current page
            // which is the last page of the grid
            newPage--; // go to the previous page
        }
        // reload grid to make the row from the next page visable.
        $(this).trigger("reloadGrid", [{page: newPage}]);
    }
}

所以我们只是在空网格的情况下减少页码并再次重新加载网格。

如果要删除本地网格 ( datatype: "local") 中的数据，可以使用以下设置：

$.extend($.jgrid.del, {
    // because I use "local" data I don't want to send the changes to the server
    // so I use "processing:true" setting and delete the row manually in onclickSubmit
    onclickSubmit: function(options, rowid) {
        var gridId = $.jgrid.jqID(this.id),
            p = this.p,
            newPage = p.page,
            $this = $(this);

        options.processing = true;

        // delete the row
        $this.jqGrid("delRowData", rowid);
        $.jgrid.hideModal("#delmod" + gridId,
            { gb: options.gbox, jqm: options.jqModal, onClose: options.onClose});

        if (p.lastpage > 1) {// on the multipage grid reload the grid
            if (p.reccount === 0 && newPage === p.lastpage) {
                // if after deliting there are no rows on the current page
                // which is the last page of the grid
                newPage--; // go to the previous page
            }
            // reload grid to make the row from the next page visable.
            $this.trigger("reloadGrid", [{page: newPage}]);
        }
        return true;
    },
    processing: true
});

您可以在这里看到相应的演示。

Answer 2

关于#1，您说：

明确使用 ReloadGrid 它会从控制器重新加载整个数据，这会增加网络负载。

但我认为这是你必须做的，因为 jqGrid 一次只检索一页数据。如果您不从服务器重新加载，网格将如何重新填充自身？或者也许我错过了什么？

---

关于 #2，在 AJAX 调用之后，网格使用 XML/JSON 响应中的页码。您可以在grid.base.js 的源代码中看到这一点：

ts.p.page = $.jgrid.getXmlData( xml,xmlRd.page ) || 0;

...

ts.p.page = $.jgrid.getAccessor(data,dReader.page) || 0;

这两个函数还包括一个调用来更新寻呼机中的页码：

if (!more) { ts.updatepager(false,true); } // Note: More is true if pageNum > 0

因此，一种解决方案是让您的服务器代码检测给定的页码是否大于最大值，并在您的响应中将其设置回最大值。如果在查询实际数据之前执行此操作，您还可以调整该查询以返回最后一页的数据，从而避免显示错误消息。

Answer 3

我有同样的问题。这是我对这个问题的解决方案：

$("#jqgCars").clearGridData(true).trigger(
   "reloadGrid", [{ current: true }]
);