Question

来自后端数据的是序列号。像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”属性

rowBuffer：网格渲染的可滚动可见区域之外渲染的行数。默认值为20。具有缓冲区意味着当用户缓慢垂直滚动时，网格将准备显示行。

rowBuffer rowBuffer Example

Ag网格垂直滚动问题

1 个答案: