javascript 当其他列动态隐藏/显示时,自动调整AG Grid的Angular 行高

8gsdolmq  于 2023-01-08  发布在  Java
关注(0)|答案(1)|浏览(161)

我正在使用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);
  }
}
mzsu5hc0

mzsu5hc01#

又好又简单;在你的显示/隐藏,添加this.gridApi.resetRowHeights();

相关问题