jqGrid:删除最后一条记录不会刷新网格+分页有麻烦 [英] jqGrid : deleting last record dosen't refresh the grid + trouble with paging

问题描述

我在jqGrid中遇到两个问题

I 've two problems in jqGrid

1)假设表中有91条记录，并且rownum设置为10，现在当我导航到最后一页并删除记录号91时，它不会自动重新加载网格，当我显式使用ReloadGrid时它会重新加载来自控制器的全部数据，这会增加网络负载.

1) Suppose there is 91 records in table with rownum set to 10, now when i navigate to last page and delete the record number 91, it does not reload the grid automatically, when i use ReloadGrid explicitly it went to reload the whole data from controller which increases the network load.

2)在我的网格中有10页，当我在文本框中输入的页码大于最大页数时，它将显示为空白网格，理想情况下，它应该显示一些消息.

2) In my grid there are 10 pages and when I enter the page number greater than the max page in text box it gives the blank grid, ideally it should dispaly some message.

任何解决方案?

用于更好地理解问题的添加代码

$(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的发布完全相同

Solution of problem#2 is exact as posted by Oleg

这与jqGrid v4.1.2兼容

推荐答案

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

It's good question! In the old answers this and this you will find the answer on your first question. Because the answers are long and you need to use delete of data on the server I repeat the same idea here.

在一个问题中问两个单独的问题是不好的.这样的问题对搜索引擎不利.在您的问题的第2部分中有问题的用户将必须阅读不需要的信息.因此，请不要在将来执行此操作.

It's not good to ask two separate questions inside of one question. Such questions are not good for searching engine. The users which have the problem from the part 2 of your question will be have to read unneeded information. So please don't do this in the future.

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

I start the answer with your second question. If the user type in the input part of the pager any value and press Enter the rows for the page will be requested from the server or from the local dataset. If the user choosed to large page number the grid will be successfully reloaded, but with no data. Absolutely the same results one will have in case of deleting the last row from the last page. The page with the same number will be reloaded and the user will see empty grid.

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

To fix the problem one can use the following onPaging callback:

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 方法可在最后一行之后执行其他操作将被删除.代码可以如下:

Not we go back to the first part of your question. To solve the problem one can use afterComplete callback of delGridRow method to do additional actions after the last row will be deleted. The code can be the following:

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

因此，在网格为空的情况下，我们只需减少页数，然后再重新加载一次网格即可.

So we just decrease the page number in case of empty grid and reload the grid one more time.

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

In case of deleting of data in the local grid (datatype: "local") one can use the following settings:

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

您可以在此处观看相应的演示..

The corresponding demo you can see live here.

这篇关于jqGrid:删除最后一条记录不会刷新网格+分页有麻烦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！