Question

我需要根据内容自动调整列宽的大小。除了groupColumnDef之外，所有列的大小调整都很好，由于某些原因，actualSize值比应该的值小很多。

我没有在列def中设置minWidth / width / maxWidth。可能是什么问题？

Answer 1

// grid.component.html

<div style="text-align:center">
  ag-grid Example
</div>
<ag-grid-angular #agGrid style="width: 100%; height: 500px;" class="ag-theme-balham" [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)">
</ag-grid-angular>


// employee.ts

export interface Employee {
    name: string;
    age: number;
    country: string;
    year: number;
    date: number;
    month: string;
    ssn: number;
    address: string;
    zipCode: number;
    occupation: string;
    employer: string;
    employerAddress: string;
    mobNum: number;
}


// grid-component.ts

import { Component, OnInit } from '@angular/core';
import { GridOptions } from 'ag-grid-community';
import { Employee } from './models/employee';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class GridComponent implements OnInit {
  gridOptions: GridOptions;

  constructor() {}

  ngOnInit() {
    this.setGridOptions();
  }

  setGridOptions() {
    this.gridOptions = {
      suppressColumnVirtualisation: true
    } as GridOptions;
  }

  onGridReady(params) {
    this.setData();
  }

  setData() {
    this.gridOptions.api.setColumnDefs(this.getColumnDefinitions());
    this.gridOptions.api.setRowData(this.getData());
    this.autoSizeAll();
    this.gridOptions.api.refreshCells();
  }

  getColumnDefinitions(): Array<any> {
    return [
      {
        field: 'name',
        headerName: 'Name'
      },
      {
        field: 'age',
        headerName: 'Age'
      },
      {
        field: 'country',
        headerName: 'Country'
      },
      {
        headerName: 'Birth Day',
        children: [
          {
            headerName: 'Year',
            field: 'year'
          },
          {
            headerName: 'Month',
            field: 'month'
          },
          {
            headerName: 'Date',
            field: 'date'
          }
        ]
      },
      {
        field: 'ssn',
        headerName: 'Social Security Number'
      },
      {
        field: 'address',
        headerName: 'Address'
      },
      {
        field: 'zipCode',
        headerName: 'Zip Code'
      },
      {
        headerName: 'Occupation Details',
        children: [
          {
            field: 'occupation',
            headerName: 'Occupation'
          },
          {
            field: 'employer',
            headerName: 'Employer'
          },
          {
            field: 'employerAddress',
            headerName: 'Employer Address'
          },
        ]
      },
      {
        field: 'mobNum',
        headerName: 'Mobile Number'
      }
    ];
  }

  getData(): Employee[] {
    return [
      {
        name: 'Mary Smith',
        age: 25,
        country: 'Australia',
        year: 1990,
        date: 14,
        month: 'March',
        ssn: 1234542792102229,
        address: '31 Rainbow Rd, Towers Hill, QLD 4820 31 Rainbow Rd, Towers Hill, QLD 4820',
        zipCode: 11350,
        occupation: 'Engineer',
        employer: 'MicroSoft',
        employerAddress: '245 Rainbow Rd, Microsoft, Towers Hill, QLD 4820',
        mobNum: 7156662910
      },
      {
        name: 'Jeff Martin',
        age: 30,
        country: 'UK',
        year: 1987,
        date: 24,
        month: 'December',
        ssn: 1234542792102229,
        address: '31 Rainbow Rd, Towers Hill, QLD 4820',
        zipCode: 11350,
        occupation: 'UI/UX Designer',
        employer: 'Facebook India',
        employerAddress: '17 Rainbow Rd, Towers Hill, QLD 4820',
        mobNum: 7158462910
      }
    ];
  }

  autoSizeAll() {
    const allColumnIds = [];
    this.gridOptions.columnApi.getAllColumns().forEach((column: any) => {
      allColumnIds.push(column.colId);
    });

    this.gridOptions.columnApi.autoSizeColumns(allColumnIds);
  }

}

这是我要做的

在html中-绑定gridOptions和onGridReady事件
在组件中
- 初始化网格选项，并设置preventColumnVirtualisation = true。
- 当网格准备就绪时，通过设置列定义然后设置行数据来将数据设置为网格。
- 获取网格中所有列的列ID，并在grid api autoSizeColumns中进行设置。

autoSizeColumns（）仅查看屏幕上已渲染的单元格。因此，根据看到的内容设置列宽。这是由于列虚拟化导致的。因此，屏幕上不可见的列将不会自动调整大小。

只需设置 suppressColumnVirtualisation = true

，就可以绕过此行为

请注意，网格使用此列虚拟化来改善有大量列要处理时网格的性能呈现。

aggrid中的groupColumnDef的actualSize错误

1 个答案: