Вопросы Теги

Неверный currentSize для groupColumnDef в aggrid

Из названия этого вопроса я ожидал найти что-то вроде range(), что позволило бы мне указать две даты и создать список со всеми датами между ними. Таким образом, не нужно рассчитывать количество дней между этими двумя датами, если заранее не знать об этом.

Таким образом, с учетом того, что он немного не по теме, этот однострочный лайнер выполняет работу : 

import datetime
start_date = datetime.date(2011, 01, 01)
end_date   = datetime.date(2014, 01, 01)

dates_2011_2013 = [ start_date + datetime.timedelta(n) for n in range(int ((end_date - start_date).days))]

Все кредиты для этого ответа !

0
задан mila 19 March 2019 в 14:24
поделиться

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);
  }

}

Вот что я сделал:

  1. В html - привязка gridOptions и событие onGridReady

  2. В компоненте

    • Инициализация параметры сетки и установите suppressColumnVirtualisation = true.
    • Когда сетка готова, задайте данные для сетки, установив определения столбцов, а затем данные строк.
    • Получите идентификаторы столбцов всех столбцов в сетке и установите их в сетке api autoSizeColumns.

autoSizeColumns () просматривает только ячейки, уже отрисованные на экране. Поэтому ширина столбца устанавливается в зависимости от того, что он видит. Это происходит из-за виртуализации столбцов. Таким образом, столбцы, не видимые на экране, не будут автоматически иметь размер.

Это поведение можно обойти, просто установив suppressColumnVirtualisation = true

Обратите внимание, что сетка использует эту виртуализацию столбцов для повышения производительности сетки при большом количестве столбцов быть оказанным.

0
ответ дан Dilani Alwis 19 March 2019 в 14:24
поделиться