不确定我是否正确设置了网格,或者这是一个合法的错误,但是似乎网格在移动设备上没有垂直滚动。除去粘性胶后,一切开始起作用。
复制步骤: -运行以下代码段 -在浏览器中切换到移动模式(如果您不在带触摸屏的设备上) -尝试向下滚动
Ag-grid版本:16.0.1
我已经测试了最新版本(18.1.1),并且工作正常(即使使用固定的列)。但是我无法升级到最新版本,因此,如果能解决此问题,我将不胜感激。
var columnDefs = [
{headerName: "ID", width: 50,
valueGetter: 'node.id',
cellRenderer: 'loadingRenderer'
},
{headerName: "Athlete", field: "athlete", width: 150},
{headerName: "Age", field: "age", width: 90},
{headerName: "Country", field: "country", width: 120},
{headerName: "Year", field: "year", width: 90},
{headerName: "Date", field: "date", width: 110},
{headerName: "Sport", field: "sport", width: 210},
{headerName: "Gold", field: "gold", width: 300},
{headerName: "Silver", field: "silver", width: 400},
{headerName: "Bronze", field: "bronze", pinned: 'right', width: 200},
];
function MenuRenderer( params ) {
}
MenuRenderer.prototype.init = function(params) {
this.eGui = document.createElement('div');
this.eGui.classList.add('menu');
var menuElement = `
<a href="#"> * </a>
<div class="menu--list">
</div>
`;
this.eGui.innerHTML = menuElement;
};
MenuRenderer.prototype.getGui = function() {
return this.eGui;
};
var gridOptions = {
components:{
loadingRenderer: function(params) {
if (params.value !== undefined) {
return params.value;
} else {
return '<img src="./loading.gif">'
}
},
'menuRenderer': MenuRenderer
},
columnDefs: columnDefs,
rowBuffer: 0,
rowModelType: 'infinite',
paginationPageSize: 100,
cacheOverflowSize: 2,
maxConcurrentDatasourceRequests: 2,
infiniteInitialRowCount: 0,
maxBlocksInCache: 2,
//embedFullWidthRows:true,
onGridReady: function (params) {
params.api.sizeColumnsToFit();
}
}
// wait for the document to be loaded, otherwise,
// ag-Grid will not find the div in the document.
document.addEventListener("DOMContentLoaded", function() {
// lookup the container we want the Grid to use
var eGridDiv = document.querySelector('#myGrid');
// create the grid passing in the div to use together with the columns & data we want to use
new agGrid.Grid(eGridDiv, gridOptions);
agGrid.simpleHttpRequest({url: 'https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinners.json'}).then(function(data) {
var dataSource = {
rowCount: null, // behave as infinite scroll
getRows: function (params) {
console.log('asking for ' + params.startRow + ' to ' + params.endRow);
// At this point in your code, you would call the server, using $http if in AngularJS 1.x.
// To make the demo look real, wait for 500ms before returning
setTimeout( function() {
// take a slice of the total rows
var rowsThisPage = data.slice(params.startRow, params.endRow);
// if on or after the last page, work out the last row.
var lastRow = -1;
if (data.length <= params.endRow) {
lastRow = data.length;
}
// call the success callback
params.successCallback(rowsThisPage, lastRow);
}, 500);
}
};
gridOptions.api.setDatasource(dataSource);
});
});
/* Menu */
.ag-body-container .ag-row {
z-index: 0;
}
/* [Layout] */
.fill-height-or-more {
min-height: 100%;
display: flex;
flex-direction: column;
border: 1px solid red;
}
.fill-height-or-more > div {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.some-area > div {
padding: 1rem;
}
.some-area > div:nth-child(1) {
flex-grow:0;
background: #88cc66;
}
.some-area > div:nth-child(2) {
flex-grow: 0;
background: #ec971f;
}
.some-area > div:nth-child(3) {
position: relative;
padding: 0;
justify-content: stretch;
align-content: flex-start;;
flex-grow:1;
background: #8cbfd9;
}
.some-area > div:nth-child(4) {
flex-grow: 0;
position: absolute;
background: #ec971f;
}
.some-area > div h2 {
margin: 0 0 0.2rem 0;
}
.some-area > div p {
margin: 0;
}
.inner{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
html, body {
padding:0;
margin: 0;
height: 100%;
overflow: hidden;
}
.ag-body-viewport {
-webkit-overflow-scrolling: touch;
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/16.0.1/ag-grid.min.js"></script>
</head>
<html>
<body>
<section class="some-area fill-height-or-more">
<div>
Header
</div>
<div>
Action bar
</div>
<div>
<div class="inner">
<div id="myGrid" style="height: 100%; width:100%; font-size: 1.4rem" class="ag-theme-fresh"></div>
</div>
</div>
</section>
</body>
</html>