开发者

Why Would Slickgrid Ajax/Infinite Scroll Produce Intermittent Blank Rows?

In scrolling through a remote data source, SlickGrid works correctly, but ofte开发者_如何学JAVAn adds a series of empty rows.

For instance:

Good Good Good Empty Empty Empty Good Good Good Good

It seems like, in the process of loading the data, in creates these empty rows, then uses subsequent rows, rather than the empty ones it has created, to render populated rows.

I've looked everywhere and come up short. Can anybody think of something that would cause this behavior?

Thanks in advance.


There is a bug in the ensureData(from, to) method in the slickgrid RemoteModel example but I don't remember exactly what. I corrected it and some more to make more efficient use of the back-end database. Here is the code:

    /** Ensures data range is loaded, loading if necessary. */
    function ensureData(from, to) {
        // Reduce range to only unloaded data by eliminating already loaded data at the extremes
        // or data which is already being loaded by a pending request
        if (from < 0) {from = 0;}
        while (data[from] !== undefined && from < to) {from++;}
        while (data[to] !== undefined && from < to) {to--;}

        // no need to load anything
        if (data[from] !== undefined) {
            return;
        }

        // A request for data must be made: increase range if below optimal request size
        // to decrease number of requests to the database
        var size = to - from + 1;
        if (size < optimalRequestRangeSize) {
            // expand range in both directions to make it equal to the optimal size
            var expansion = Math.round((optimalRequestRangeSize - size) / 2);
            from -= expansion;
            to += expansion;

            // if range expansion results in 'from' being less than 0,
            // make it to 0 and transfer its value to 'to' to keep the range size
            if (from < 0) {
                to -= from;
                from = 0;
            }

            // Slide range up or down if data is already loaded or being loaded at the top or bottom...
            if (data[from] !== undefined) {
                while (data[from] !== undefined) {
                    from++; 
                    to++;
                }
            }
            else if (data[to] !== undefined) {
                while (data[to] !== undefined && from > 0) {
                    from--; 
                    to--;
                }
            }
        }

        // After adding look-ahead and look-behind, reduce range again to only unloaded 
        // data by eliminating already loaded data at the extremes
        while (data[from] !== undefined && from < to) {from++;}
        while (data[to] !== undefined && from < to) {to--;}

        // clear any pending request
        if ( request !== null)
            clearTimeout( request);

        // launch request to server with a delay of 100ms to cater with quick scrolling down
        request = setTimeout(function() {
            requests++;

            // set records in range to null; null indicates a 'requested but not available yet'
            for (var i = from; i <= to; i++) {
                if (!data[i]) {
                    data[i] = null; 
                }
            }

            // notify grid (to show loading message) and load through ajax
            onDataLoading.notify({from: from, to: to});
            $.ajax({
                url: url,
                global: false,
                cache: true,
                type: "GET",
                data: {
                  from: from,
                  to: to,
                  sortColumn: sortColumn,
                  sortDirection: sortDirection
                },
                dataType: "xml",
                success: function(response, textStatus, jqXHR) {
                    if (requests > 0) requests--;
                    onSuccess(response, textStatus, jqXHR)
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    if (requests > 0) requests--;
                    if (textStatus !== "abort") {
                        onDataLoadingError.notify({
                            from: from, to: to, pendingRequests:requests, 
                            textStatus: textStatus, errorThrown: errorThrown
                        });
                    }
                }
           });
        }, 100);
    }

Hope this helps.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜