Почему Slickgrid Ajax / бесконечная прокрутка будет создавать прерывистые пустые строки?

#jquery #slickgrid

#jquery #slickgrid

Вопрос:

При прокрутке удаленного источника данных SlickGrid работает корректно, но часто добавляет серию пустых строк.

Например:

Хорошо хорошо хорошо пусто Пусто пусто Хорошо хорошо хорошо хорошо

Похоже, что в процессе загрузки данных in создает эти пустые строки, а затем использует последующие строки, а не пустые, которые он создал, для отображения заполненных строк.

Я искал везде и ничего не нашел. Кто-нибудь может придумать что-нибудь, что могло бы вызвать такое поведение?

Заранее спасибо.

Ответ №1:

В методе ensureData(from, to) в примере slickgrid RemoteModel есть ошибка, но я точно не помню, какая именно. Я исправил это и еще кое-что, чтобы более эффективно использовать серверную базу данных. Вот этот код:

     /** 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 amp;amp; from < to) {from  ;}
        while (data[to] !== undefined amp;amp; 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 amp;amp; 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 amp;amp; from < to) {from  ;}
        while (data[to] !== undefined amp;amp; 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);
    }
  

Надеюсь, это поможет.