Question

在大屏幕上，我使用sizeColumnsToFit()来使ag-grid表适合整个屏幕，但是在移动屏幕尺寸下，我想使用autoSizeColumns()，因为sizeColumnsToFit()将使所有列很小因此，是否可以通过媒体查询设置特定的屏幕尺寸来动态实现此目的？还是有人有其他解决方案？

Answer 1

最后，我得到了一个目前运行良好的解决方案。我在onGridReady()中放置了一个条件，该条件最初会检测屏幕尺寸的宽度，因此它可以动态触发autoSizeColumns()或sizeColumnsToFit()

  onGridReady(params) {
    setTimeout(() => {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;   
      const eGridDiv = document.querySelector('.my-grid');
      const allColumnIds = [];
      if (eGridDiv.clientWidth <= 768) {
        this.gridColumnApi.getAllColumns().forEach(function(column) {
          allColumnIds.push(column.colId);
        });
        this.gridColumnApi.autoSizeColumns(allColumnIds);
      } else {
        params.api.sizeColumnsToFit();
      }      
    }, 500);
  }

<ag-grid-angular 
style="width: auto; height: 60vh;"
class="ag-theme-balham my-grid"
[rowData]="data" 
[columnDefs]="columns"
[enableColResize]="true"
(gridReady)="onGridReady($event)">
</ag-grid-angular>

Angular 5 + Ag-Grid-将Ag-Grid与媒体查询配合使用

1 个答案: