jqgrid 行更新数据在排序客户端被清除

Question

我在我的 ASP.NET MVC 视图 page.In 上使用 JQGrid，我正在进行客户端更新、排序、分页，我正在客户端和服务器端进行删除操作（基于一些条件）。

注意：我的 JQGrid 版本是：4.6.0

我的问题是，当我更新或删除任何记录，然后进行分页或排序操作时，我的网格显示初始 JSON 数据表示第一次使用网格加载的数据。

$("#myGrid").jqGrid({
    url: "Product/List",
    datatype: "json",
    mtype: "GET",
    colNames: ['Id', 'Name', 'Category'],
    colModel: [
        { name: 'Id', index: 'Id', width: 20, key: false, sorttype: 'int' },
        { name: 'Name', index: 'Name', key: true },
        { name: 'Category', index: 'Category',  key: false },
        { name: 'Action', index: 'Action', key: false, sortable: false, formatter: DisplayActionButtons, width: 20 }],
    height: 'auto',
    jsonReader: {
        //root: 'rows',
        //page: 'page',
        total: 'total',
        //records: "records",
        repeatitems: false,
        id: 'ID'
    },
    ignoreCase: true,
    sortname: 'Name',
    loadComplete: function () {                                                                                                                        
        var cnt = $("#myGrid").jqGrid('getGridParam', 'records');
        var emptymessageDiv = $('#dvMessage');

        if (emptymessageDiv.length == 0) {
            $("<div id='dvMessage'> <span class='clsEmptyRow'></span></div>")
                .insertBefore("#myGrid");
        }

        if (cnt == 0 && emptymessageDiv.length == 0) {
            $("#dvMessage .clsEmptyRow").text('No Record Found');
        }
    },
    autowidth: true,
    multiselect: false,
    pager: "#divPager",
    rowNum: 5,
    select: false,
    loadonce: true,
    sortorder: "asc"
});

这是我用来更新记录的 jquery -

$("#myGrid").jqGrid('setCell', rowId, columnName, NewValue);

下面是jquery删除记录：-

$('#myGrid').jqGrid('delRowData', rowid);

下面是删除记录前的截图-

下面是删除所有网格行后的屏幕截图:-

It's clear from the screen shot grid is not updating the values/rows data after paging,sorting,updating or deleting.

注意：第二个屏幕截图是在我对网格进行排序或在网格上进行分页后显示带有初始行的 "No Record Found." 消息。

Answer 1

您使用的loadComplete回调代码必须更改。

首先，您应该只创建和添加 "<div id='dvMessage'> <span class='clsEmptyRow'></span></div>" 一次，而不是在每次执行 loadComplete 时附加相同的 div。因此，您应该将相应的代码片段从 loadComplete 移动到 之后直接放置在 创建网格之后。在 loadComplete 中，您只需要 show/hide div:

$("#myGrid").jqGrid({
    ...
    loadComplete: function () {
        // call $("#dvMessage").show() or $("#dvMessage").hide()
        // depend on the number of records in the grid
        $("#dvMessage")[$(this).jqGrid("getGridParam", "records") > 0 ?
            "hide" : "show"]();
    },
    onInitGrid: function () {
        $(this).before("<div id='dvMessage'><span class='clsEmptyRow'>No Record Found</span></div>")
    }
});

你可以考虑用reccount代替records。最佳选择取决于您的具体要求。

jqgrid 行更新数据在排序客户端被清除

jqgrid rows updated data wash out on sorting client side

jquery

jqgrid