我正在使用AG-Grid版本:21.2.1,由于某些原因,我无法升级我的版本。
我想 Package 单元格内容,使所有内容都将可见,我实现了。我有按钮隐藏/显示列在应用程序中。
问题是当我隐藏列时,行的高度不会根据其他列进行调整。
如果另一列被动态隐藏/显示,我们如何激活网格自动调整内容?
我已经在这个Stackblitz中模拟了这个问题。
单击删除按钮,观察行的高度是否保持不变,而不是根据其他列的内容进行调整
来自stackblitz的示例代码
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
gridApi;
gridColumnApi;
defaultColDef = {
width: 170,
sortable: true,
editable: true,
resizable: true,
filter: true,
};
columnDefs = [
{
field: 'make',
wrap: true,
autoHeight: true,
width: 300,
minWidth: 300,
hide: false,
cellStyle: {
wordBreak: 'break-all',
whiteSpace: 'normal',
},
},
{ field: 'model', wrap: true, autoHeight: true },
{ field: 'price', wrap: true, autoHeight: true },
];
rowData = [
{
make: 'Toyota ToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyotaToyota',
model:
'CelicaCelicaCelicaCelicaCelicaCelicaCelicaCelicaCelicaCelicaCelicaCelicaCelicaCelicaCelica',
price: 35000,
},
{
make: 'FordFordFordFordFordFordFordFordFordFordFordFord',
model: 'Mondeo',
price: 32000,
},
{ make: 'Porsche', model: 'Boxter', price: 72000 },
];
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
}
showColumn() {
this.gridColumnApi.setColumnsVisible(['make'], true);
}
hideColumn() {
this.gridColumnApi.setColumnsVisible(['make'], false);
}
}
1条答案
按热度按时间mzsu5hc01#
又好又简单;在你的显示/隐藏,添加
this.gridApi.resetRowHeights();
。