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;
}

我们不会回到你问题的第一部分。要解决此问题，可以使用afterComplete回调delGridRow方法在删除最后一行后执行其他操作。代码可以是：

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
});

相应的演示，您可以看到实时here。

Answer 2

关于＃1，你说：

  

显式地使用ReloadGrid它从控制器重新加载整个数据，这增加了网络负载。

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

---

关于＃2，在AJAX调用之后，网格使用XML / JSON响应中的页码。您可以在source code to 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 }]
);