Question

我们正在使用带有虚拟滚动的jqGrid 3.8.2来滚动记录列表。如果用户慢慢滚动列表，它可以很好地工作。一旦用户抓住滚动条并快速滚动到底部，网格中返回的记录就完全无序，有时会重复。我们为获取记录而进行的AJAX调用调用了一个WCF服务，该服务将数据库中的记录返回到jqGrid中的AJAX回调，然后将数据加载到网格中。数据库需要一个页码，而这又反映了我们想要的记录页面。

由于AJAX调用的时间安排，我很确定结果会以错误的顺序返回。这意味着呼叫并不总是先进先出。在较早的调用之前，较新的调用可能会返回到jqGrid。

有关如何使其正常工作的任何想法？我可以采取哪些步骤来帮助我们朝着正确的方向前进？

如果有帮助，这里是js配置：

PersonalListContactGridControl.GetGridConfig = function() {
    var jqGridConfig = {
        url: Common.AjaxService.serviceUrl + "/GetPersonalListContacts",
        datatype: "JSON",
        ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
        mtype: "POST",
        autowidth: true,
        height: PersonalListContactGridControl.Constants.Height,
        altRows: true,
        sortname: "LastName",
        viewrecords: true,
        emptyrecords: "",
        loadtext: '',
        multiselect: true,
        //sortorder: "desc",

        //- virtual scrolling:: 1 ON / 0 OFF
        loadonce: false, // SUPPORT FOR REBIND
        rowNum: PersonalListContactGridControl.Constants.GridPageSize,
        scroll: 1,

        gridview: true,

        //- column header text
        colNames: ['EndPointID',
            PersonalListContactGridControl.Constants.FirstNameColumnDisplayText,
            PersonalListContactGridControl.Constants.LastNameColumnDisplayText,
            PersonalListContactGridControl.Constants.EmailFaxColumnDisplayText,
            PersonalListContactGridControl.Constants.TypeColumnDisplayText],
        //- column specific definitions
        colModel: [
            { name: 'EndPointID', index: 'EndPointID', hidden: true },
            { name: 'FirstName', index: 'FirstName', width: 155, align: 'left', editable: false, title: true,
              hidden: false, resizable: true, sortable: true, editoptions: { readonly: true },
              formatter: PersonalListContactGridControl.formatLink },
            { name: 'LastName', index: 'LastName', width: 155, align: 'left', editable: false, title: true,
              hidden: false, resizable: true, sortable: true, editoptions: { readonly: true },
              formatter: PersonalListContactGridControl.formatLink },
            { name: 'EmailAddress', index: 'EmailAddress', width: 240, align: 'left', editable: false, title: true,
              hidden: false, resizable: true, sortable: true, editoptions: { readonly: true },
              formatter: PersonalListContactGridControl.formatEmailFax },
            { name: 'EndPointType', index: 'EndPointType', width: 60, align: 'left', editable: false, title: true,
              hidden: false, resizable: true, sortable: true,  editoptions: { readonly: true },
              formatter: PersonalListContactGridControl.formatType }
        ],

        //- jqGrid's "reader" ... the structure of the JSON/XML returned (Fiddler) must match this
        jsonReader: {
            root: "d.Contacts",
            total: function(obj) {
                return Math.ceil(obj.d.TotalRecords / PersonalListContactGridControl.Constants.GridPageSize);
            },
            records: function(obj) {
                return obj.d.TotalRecords;
            },
            id: 'EndPointID',
            repeatitems: false
        },

        serializeGridData: function(jqGridParms) {
            //alert(jqGridParms.page);
            return PersonalListContactGridControl.GetRequest(jqGridParms);
        },
        loadComplete: function(data) {
            if (data.d) {
                if (data.d.ResponseProperties.Success === false) {
                    if (data.d.ResponseProperties.ErrorMessage.indexOf('The List has been deleted') > -1) {
                        ManagePersonalList.OnPersonalListErrorHandler();
                        return;
                    }
                }
                var grid = PersonalListContactGridControl.Grid();
                if (data.d.Contacts == null || data.d.Contacts.length == 0) { // are there any records?
                    // check if row exists
                    if (!grid.getInd(-1)) {
                        if (PersonalListContactGridControl.SearchString == "") {
                            grid.addRowData(-1, { "FirstName": PersonalListContactGridControl.Constants.NoContactDisplayText });
                        }
                        else {
                            grid.addRowData(-1, { "FirstName": PersonalListContactGridControl.Constants.NoContactForSearchDisplayText });
                        }
                        grid.find('#-1 input').hide(); // takeout the selection checkbox
                    }
                    PersonalListGridControl.ToggleExportButton(false);
                }
                else {
                    if (PersonalListContactGridControl.Constants.dtoToSelectID != null) {
                        if (PersonalListContactGridControl.SelectContactById(PersonalListContactGridControl.Constants.dtoToSelectID, true))
                            PersonalListContactGridControl.Constants.dtoToSelectID = null;
                    }
                    PersonalListGridControl.ToggleExportButton(true);
                }
                // cache the return objects
                PersonalListContactGridControl.DTOS = PersonalListContactGridControl.DTOS.concat(data.d.Contacts);
                PersonalListContactGridControl.InitRows();
            }
        },
        loadError: function(xhr, status, error) {
            alert("Type: " + status + "; Response: " + xhr.status + " " + xhr.statusText);
        },

        onCellSelect: function(rowid, iCol, cellcontent, e) {
            if (iCol == 0)
                PersonalListContactGridControl.CheckItem();
            else
                PersonalListContactGridControl.SelectContactById(rowid);
        },

        onSelectRow: function(id, status) {
            if (!status) return;
        },
        onSelectAll: function() {
            var grid = PersonalListContactGridControl.Grid();
            var selections = new Array();
            selections = grid.getGridParam('selarrrow');
            if (selections[0] == -1) {
                //if -1, then no rows are available
                PersonalListContactGridControl.UpdateHeaderCount(0);
            }
            else {
                PersonalListContactGridControl.UpdateHeaderCount(selections.length);
                ManagePersonalList.OnSelectAllChanged(this, { Ids: selections });
            }
        }
    };

    return jqGridConfig;
}

Answer 1

尝试将JSONReader更改为..

    jsonReader: {
        root: "d.Contacts",
        page: "d.currpage",
        total: "d.totalpages",
        records: "d.TotalRecords",
        id: 'EndPointId',
        repeatitems: false
    },

d.totalpages和d.currpage应该从AJAX调用返回

带虚拟滚动的jqGrid不按正确的顺序返回记录

1 个答案: