jqgrid行更新的数据在排序客户端上被清除 [英] jqgrid rows updated data wash out on sorting client side

问题描述

我正在ASP.NET MVC视图页面上使用JQGrid.在其中我进行客户端更新，排序，分页，并在客户端和服务器端进行删除操作(基于某些条件).

I am using JQGrid on my ASP.NET MVC view page.In which I am doing client side updating,sorting,paging and I am doing delete operation both on client side and server side(based on some condition).

注意:我的JQGrid版本是:4.6.0

Note : My JQGrid version is : 4.6.0

我的问题是，当我更新或删除任何记录时，执行分页或排序操作后，我的网格显示了初始JSON数据，这意味着第一次使用网格加载数据.

My problem is when I update or delete any record and after that do paging or sorting operation my grid is showing the initial JSON data means the data that loads first time with grid.

$("#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-

This is the jquery by which I am updating the record -

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

下面是删除记录的jquery:-

And below is jquery to delete the record : -

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

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

Below is the screen shot before deleting the records -

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

And below is the screen shot after deleting all the rows of grid :-

从屏幕快照网格中可以明显看出，在分页，排序，更新或删除之后，并没有更新值/行数据.

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

注意: 屏幕截图显示的是找不到记录".在对网格进行排序或在网格上进行分页后，将显示带有初始行的消息.

Note : Screen shot second is showing the "No Record Found." message with the initial rows once I sort the grid or do pagination on grid.

推荐答案

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

The code of loadComplete callback which you use have to be changed.

首先，您应该创建并仅添加一次"<div id='dvMessage'> <span class='clsEmptyRow'></span></div>" ，而不是在每次执行loadComplete时都添加相同的div.因此，您应该从loadComplete中移出相应的代码片段，并将其直接放置在 之后.在loadComplete内部，您只需要显示/隐藏div:

First of all you should create and add "<div id='dvMessage'> <span class='clsEmptyRow'></span></div>" only once instead of appending the same div on every execution of loadComplete. So you should move the corresponding code fragment from loadComplete and place it directly after the grid is created. Inside of loadComplete you need just show/hide the 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.最佳选择取决于您的确切要求.

You can consider to use reccount instead of records. The best choice depend on your exact requirements.

这篇关于jqgrid行更新的数据在排序客户端上被清除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！