我已经将ag-grid版本从7.2.0升级到v14.2.0。当我将sizeColumnsToFit()
API与onGridReady
或onGridSizeChanged
事件一起使用时,它可以工作,但它会保持不必要的水平滚动,可能是由于网格宽度计算错误。
这个问题(?)也可以在ag-grid的官方示例中看到,
https://www.ag-grid.com/javascript-grid-responsiveness/#example-example1
x1c 0d1x的数据
与以前的版本,这是完全没有任何水平滚动罚款。
当我手动调用$scope.gridOptions.api.sizeColumnsToFit()
时,它会删除水平滚动。
下面是我的gridOptions:
$scope.ag_grid_options = {
headerHeight: 50,
rowHeight: 50,
//rowModelType: 'virtual',
rowModelType: 'infinite',
rowBuffer: 0,
cacheOverflowSize: 1,
infiniteInitialRowCount: 1,
cacheBlockSize: 50,
paginationPageSize: 50,
//virtualPaging: true,
enableServerSideSorting: true,
enableSorting: false,
enableColResize: true,
angularCompileRows: true,
onGridSizeChanged: function (param) {
$scope.ag_grid_options.api.doLayout();
$scope.ag_grid_options.api.sizeColumnsToFit();
},
columnDefs: grid_column_definitions
};
字符串
我知道我可以使用属性suppressHorizontalScroll= true。但我不想使用它,因为当用户手动调整列大小时,滚动条不会出现。
9条答案
按热度按时间t9aqgxwy1#
我遇到了相同/类似的问题。根本问题是我在添加垂直滚动条之前调整了列的大小。要解决这个问题,请在添加行之后调整大小。即使这样,如果没有超时,它也可能无法工作
字符串
这可能是一个不同的症状比什么OP看到,但可能是有用的其他人。
4ngedf3f2#
对我来说,最好的解决方案是在modelUpdated事件上调用API.sizeColumnsToFit()
无需设置宽度和宽度
示例代码:
字符串
在onModelUpdated()中应该调用API.sizeColumnsToFit
型
b4lqfgs43#
这不是一个bug,这是一个特性。如果所有列的总宽度计数大于你的 Package 器,就会出现一个滚动条。你应该改变headerFields的
minWidth
/maxWidth
属性,你会没事的。字符串
**旁注:**如果网格数据由于范围更改或未初始定义而更改,则需要在新的diggest圆(如
setTimeout(() => {this.gridApi.sizeColumnsToFit();});
)中调用sizeColumnsToFit()
。bybem2ql4#
有点晚,但对于那些谁正在寻找完全禁用水平滚动或调整水平滚动的高度(甚至设置为0).你还必须设置
scrollbarWidth
.字符串
您可以在这里查看AgGrid的源代码,了解它们如何处理水平滚动:https://github.com/ag-grid/ag-grid/blob/996ffcdcb828ffa3448d57fa919feb9eb465df15/community-modules/core/src/ts/gridPanel/gridPanel.ts#L889
r7xajy2e5#
另一个可能的解决方案,刚刚向我介绍了一个同事:
在列定义中,您可以通过计算客户端宽度,然后将其除以列数来设置每个列的宽度:
字符串
在这种情况下,40是网格两侧的填充之和(20左+ 20右)。
o7jaxewo6#
这个问题在v22中仍然存在,上面的解决方案似乎并不理想。我发现的最好的解决方案是在
onModelUpdated
事件处理程序中调用sizeColumnsToFit
。参见https://github.com/ag-grid/ag-grid/issues/2310。unhi4e5o7#
我的解决方案:
1.找到导致垂直滚动条出现的元素的选择器。
1.它会有overflow/overflow-y到“自动/滚动”。使它overflow/overflow-y到“覆盖”将解决您的问题。
这对我来说在任何地方都有效。
fxnxkyjh8#
这种方法适用于Angular 2+,在firstDataRendered事件中使用sizeColumnsToFit(),而不是gridReady或gridSizeChanged事件,它将删除水平滚动条。
个字符
deyfvvtc9#
我添加了以下CSS,它似乎解决了这个问题(我使用ag-grid 28.1.1):
字符串