响应式农业网格

Question

我在正确缩放 Ag 网格时遇到问题。

宽度自动适应页面，但不适应高度。我已经用 CSS 尝试了很多，但没有进一步的尝试。许多这些尝试都没有任何改变，我不知道下一步该怎么做。

结果应该是 this。在此演示中，网格是响应式的。

我有 Angular 11.2.10 和 Ag-Grid 25

HTML

<div class="card-body">
     <div class="grid-wrapper">
        <ag-grid-angular
          #agGrid
          style="width: 100%; height: 100%;"
          id="myGrid"
          class="ag-theme-alpine"
          [columnDefs]="columnDefs"
          [defaultColDef]="defaultColDef"
          [sideBar]="sideBar"
          [groupSelectsChildren]="true"
          [debug]="true"
          [rowSelection]="rowSelection"
          [rowGroupPanelShow]="rowGroupPanelShow"
          [pivotPanelShow]="pivotPanelShow"
          [enableRangeSelection]="true"
          [pagination]="true"
          [paginationPageSize]="paginationPageSize"
          [paginationNumberFormatter]="paginationNumberFormatter"
          [autoGroupColumnDef]="autoGroupColumnDef"
          [groupMultiAutoColumn]="true"
          [animateRows]="true"
          [rowData]="elements"
          (gridReady)="onGridReady($event)">
        </ag-grid-angular>
      </div>
    </div>

TypeScript

export class ActiveElementListComponent {

  private gridApi: any;
  private gridColumnApi: any;
  public autoGroupColumnDef: any;

  public defaultColDef: any;
  public rowSelection;
  public rowGroupPanelShow;
  public pivotPanelShow;
  public paginationPageSize: any;
  public paginationNumberFormatter: any;
  public sideBar: any;
  public suppressDragLeaveHidesColumns: any;
  public suppressMakeColumnVisibleAfterUnGroup: any;

  columnDefs = [//ColumsDefs...];

  // @ts-ignore
  elements: Element[];

  constructor(private http: HttpClient, private elementService: ElementService) {
    this.defaultColDef = {
      enableRowGroup: true,
      enablePivot: true,
      enableValue: true,
      sortable: true,
      resizable: true,
      athleteFilter: true,
      minWidth: 100,

    };

    this.sideBar = {toolPanels: ['columns']};
    this.rowSelection = 'multiple';
    this.rowGroupPanelShow = 'always';
    this.pivotPanelShow = 'always';
    this.paginationPageSize = 100000;
    this.suppressDragLeaveHidesColumns = true;
    this.suppressMakeColumnVisibleAfterUnGroup = true;
    this.paginationNumberFormatter = function (params: any) {
      return params.value.toLocaleString();
    };
  }

  onGridReady(params: any) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.elementService.getActiveElements().subscribe(data => {
      this.elements = data;
    });
  }

  onColumnRowGroupChanged(params: any) {
    let columnStateParams: { colId: any; hide: boolean; }[] = [];

    //The ag-grid is not enlarging based on the page height,
    //so dynamically adjusting the height of the grid
    //This does'nt work!

    this.gridApi.setDomLayout("autoHeight");

    params.columns.forEach((col: { getColId: () => any; }) => {
      columnStateParams.push({colId: col.getColId(), hide: true});
    });

    params.columnApi.applyColumnState({
      state: columnStateParams,
    });
  }

Answer 1

在示例中，您 link 到页面中的 body 和 html 元素的样式设置为 height: 100% 和 div 的父元素网格 display:flex 页面正在调整网格 div 以适合。

这个堆栈溢出答案可能有帮助：How to make a div 100% height of the browser window

您可能还需要为父元素设置高度或显示样式：

<div class="card-body">
     <div class="grid-wrapper">

过去，为了避免在 html 中设置 body 和 height 值，我将网格设置为 100% 样式完成，并向包装 div 添加固定的 px 大小，然后在页面加载后，使用 javascript.

调整包装 div 的高度

响应式农业网格

Responsive Ag-Grid

ag-grid

responsive

angular