为什么 Slickgrid Ajax/无限滚动会产生间歇性的空白行？

Question

在滚动浏览远程数据源时，SlickGrid 可以正常工作，但经常会添加一系列空行。

例如：

好 好的 好的 空的 空的 空的 好的 好的 好的 好

看起来，在加载数据的过程中，创建了这些空行，然后使用后续行，而不是它创建的空行来呈现填充的行。

我到处都找过了，但结果都不尽如人意。有人能想到会导致这种行为的原因吗？

提前致谢。

Answer 1

slickgrid RemoteModel 示例中的 EnsureData(from, to) 方法中有一个错误，但我不记得具体是什么。我更正了它以及其他一些内容，以便更有效地利用后端数据库。这是代码：

    /** 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);
    }

希望这有帮助。