javascript - Ag网格垂直滚动问题

Question

从后端数据以序列号传入。 Like ID 将生成为 1,2,3,4.....等。我们在顶部显示最新记录，例如 5,4,3,....

问题出在垂直滚动上，我们缺少在网格中显示的大量行。请告诉我任何解决方案。

注意:每秒我们收到 3000 条记录

代码如下:

var data[];
var columnDefs = [
{headerName: "ID", width: 50},
{headerName: "Athlete", field: "athlete", width: 150},
{headerName: "Age", field: "age", width: 90}];
var gridOptions = {
enableColResize: true,
debug: true,
rowSelection: 'multiple',
rowDeselection: true,
columnDefs: columnDefs,   
rowModelType: 'infinite', 
paginationPageSize: 100,
cacheOverflowSize: 2,
maxConcurrentDatasourceRequests: 2,
infiniteInitialRowCount: 1,
maxBlocksInCache: 2};

function setRowData(allOfTheData) {
var dataSource = {
    rowCount: null, 
    getRows: function (params) {
        console.log('asking for ' + params.startRow + ' to ' + params.endRow);

        setTimeout( function() {

            var rowsThisPage = allOfTheData.slice(params.startRow, params.endRow);

            var lastRow = -1;
            if (allOfTheData.length <= params.endRow) {
                lastRow = allOfTheData.length;
            }

            params.successCallback(rowsThisPage, lastRow);
        }, 500);
    }
};
     gridOptions.api.setDatasource(dataSource);
 }

document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);

var httpRequest = new XMLHttpRequest();
httpRequest.open('GET', 'something');
httpRequest.send();
httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState == 4 && httpRequest.status == 200) {
        var data= JSON.parse(httpRequest.responseText);
        setRowData(data);
    }
};

  setInterval(function(){
 var id=0;
 var httpRequest = new XMLHttpRequest();
 if(data.length!=0)id=data[0].id;
 var url= "something?id"=+id;
httpRequest.open('GET', url);
httpRequest.send();
httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState == 4 && httpRequest.status == 200) {
        var newdata= JSON.parse(httpRequest.responseText);
       gridOptions.api.insertItemsAtIndex(0,newdata);
        gridOptions.api.refreshView();

    }
};

 },3000);

 });

Answer 1

我认为你必须设置“rowBuffer”属性

行缓冲区:在网格呈现的可滚动可视区域之外呈现的行数。默认为 20。拥有缓冲区意味着当用户缓慢垂直滚动时，网格将准备好显示行。

rowBuffer rowBuffer Example