У меня есть несколько столбцов, в которых есть четыре слова, например, предварительная торговля, отслеживание после торговли, а в некоторых из них есть три слова. Я попробовал приведенный ниже CSS, чтобы обернуть текст в несколько строк.

::ng-deep .ag-theme-material .ag-header-cell-label .ag-header-cell-text{
  white-space: normal;
  overflow-wrap: break-word;
}

HTML

<ag-grid-angular class="ag-theme-material" [rowData]="rowData" [columnDefs]="columnDefs" [overlayLoadingTemplate]="overlayLoadingTemplate" [domLayout]="domLayout" [enableSorting]="true" (gridReady)="onGridReady($event)" (gridOptions)="gridOptions" >
  </ag-grid-angular>

Но заголовок столбца остается прежним. Я хотел разбить текст заголовка столбца на несколько строк. Есть какой-либо способ сделать это?

Примечание. Я могу обернуть контент с помощью cellStyle: {'white-space': 'normal'}

{headerName: 'headername', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}},

Но хотелось шапку завернуть.

7
UI_Dev 26 Ноя 2018 в 11:48

2 ответа

Лучший ответ

Просмотрите следующий пример stackblitz.

https://stackblitz.com/edit/angular-ag-grid-angular-xmbm3p?embed=1&file=styles.css

В глобальной таблице стилей я применил следующее ... вы можете использовать ::ng-deep в своем компоненте css, это первый stackblitz, который я смог найти с ag-grid для разветвления, и он не мой, поэтому не было компонента css для использования.

.ag-header-cell-label .ag-header-cell-text {
  white-space: normal !important;
}

Следующая часть - использовать свойство headerHeight

this.gridOptions = <GridOptions>{
          headerHeight:75,

Эта часть, к сожалению, неизбежна ... она также не позволяет вам сделать высоту заголовка динамической на основе требований переноса слов.

  • Причина в том, что область содержимого определяется динамически со стилем top при визуализации представления; регулировка высоты заголовка с помощью ::ng-deep не будет динамически сдвиньте top области содержимого вниз, поскольку он рассчитывается headerHeight свойство ... если не определено, по умолчанию используется 25px, поэтому top для области содержимого также 25px.
  • Не к упомянуть, что z-индекс области содержимого заставляет его перекрывать заголовок, когда вы изменяете высоту с помощью ::ng-deep .. так что вы не знаете, действительно ли ::ng-deep сработало ... визуально то есть ... поскольку заголовок простирается под область содержимого.

Извините, но это будет как можно ближе к вам ... настройка всех элементов, сдвиг top и т. Д. На основе динамической высоты заголовка с помощью манипуляций с DOM, я боюсь, это будет слишком уродливо ... и если вам нужна динамическая высота заголовка до такой степени, что это ограничитель показа ... может быть лучше изучить другие варианты в качестве замены ag-grid.

https://www.ag-grid.com/javascript-grid-column-header/#headerHeight

6
Marshal 29 Ноя 2018 в 21:23

Для достижения ожидаемого результата используйте приведенную ниже опцию использования тега разрыва строки - br в определениях столбцов для этого конкретного столбца headerName

{headerName: 'Pre<br>Trading<br> Follow<br> Up', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}}
1
Naga Sai A 29 Ноя 2018 в 21:28