Визуализация HTML в заголовке столбца сетки GG (Community v20.0.0 +) - PullRequest
Новая
       15

Визуализация HTML в заголовке столбца сетки GG (Community v20.0.0 +)

3 голосов
/ 22 марта 2019

Ранее я обновил пакет AG Grid с 18x до 20.0.0 (версия для сообщества).В предыдущей версии я просто мог передавать строку HTML в свойство colDefs.headerName , и он отображал HTML-код в заголовке.

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

<span ref="eText" class="ag-header-cell-text" role="columnheader">
   "<span id="header-span-1" style="visibility: visible; position: static; display: inline-block; padding-bottom: 5px;">Some Text</span>"
</span>

Я, очевидно, хочу перейти к самому простому решению, которое, похоже, использует Cell Renderer (или что-то подобное, как описано на https://www.ag -grid.com/ javascript-grid-cell-render-components / ), который просто возвращает HTML.Как можно достичь следующего при использовании свойства headerName?

colDef.cellRenderer = function(params) {
    var html = '<span id="header-span-1" style="visibility: visible; position: static; display: inline-block; padding-bottom: 5px;">Some Text</span>';
    return html;
}

Если это не удастся, кто-нибудь, пожалуйста, предоставит рабочий пример того, как использовать компонент заголовка для того, что мне конкретно нужно?Я видел, где я мог определить шаблон, но это кажется излишним, учитывая, что мне нужно только то, что я описал выше.Я искал вокруг и не могу найти пример.

ОБНОВЛЕНИЕ

Благодаря ответу Доминика ниже, я смог найти решение, котороене требует чрезмерных (и ненужных) усилий.Опять же, для моего конкретного случая использования у меня был ограниченный контроль над данными столбца, возвращаемыми с сервера, но мне нужно было иметь способ его форматирования - помимо функциональности, предоставляемой форматером и AG Grid.getter properties.

В моем проекте определения столбцов предоставляются через класс ... 

export class colDefs {
    constructor(
        public headerName: any,
        public field: any,
        ...
    ) { } 
}

... и реализуется в соответствующих компонентах машинописи, например: 

for (var i = 0; i < arr.length; i++) {
  ... // Do stuff
  this.columnDefs[i] = new colDefs(headerName, field, ...);
  ... // Do stuff
 }

Следуя советам Доминика, я просто создал новый класс с именем HTMLRenderer (расширен от HeaderComp ).Я также добавил новое свойство в экспортируемый класс colDefs с именем headerComponent и передаю HTMLRenderer в качестве его значения. 

import { HeaderComp } from 'ag-grid-community/dist/lib/headerRendering/header/headerComp';
class HTMLRenderer extends HeaderComp {
    init(params) { 
    super.init(params);
    // @ts-ignore: Unreachable code error
    this.eGui.querySelector('[ref="eText"]').innerHTML = params.displayName; 
  }
}

export class colDefs {
    constructor(
        public headerName: any,
        public headerComponent: any = HTMLRenderer,
        public field: any,
        ...
    ) { } 
}

Обратите внимание на комментарий // @ ts-ignore: Недостижимый код комментарий.Это необходимоВ противном случае, если вы используете машинописный текст, он выдаст ошибку и не сможет скомпилировать.

Наконец, в моих компонентах машинописи, которые создают экземпляр класса colDefs , я передаю применимые значения.Но для свойства headerComponent вы ДОЛЖНЫ передать значение undefined, которое в основном говорит о том, что мы хотим использовать значение по умолчанию, определенное в экспортируемом классе: 

for (var i = 0; i < arr.length; i++) {
  ... // Do stuff
  this.columnDefs[i] = new colDefs(headerName, undefined, field, ...);
  ... // Do stuff
 }

Это было сделано для меня без излишеств, которые были бы связаны с созданием компонента полного заголовка для небольшой строки HTML в заголовке.HTML в моих заголовках столбцов AG Grid теперь отображается

Обратите внимание, что на самом деле существует другой подход для достижения этой цели, который заключается в изоляции HTMLRenderer в его собственном файле классов.В конечном итоге вам необходимо зарегистрировать его в качестве поставщика в app.module И в каждом файле машинописного текста, в котором вы хотите его использовать ... НЕ говоря уже о том, что вы также должны экспортировать класс И сделать его инъекционным.

Мне кажется, что этот подход слишком трудоемок для небольшого количества HTML, которое есть в заголовках столбцов.

Ответы [ 2 ]

1 голос
/ 22 марта 2019

К сожалению, они решили, что HTML не будет полезен в заголовке, или случайно сломали его, так что вы даже не можете использовать что-то вроде ° или Δ для единиц измерения.Еще хуже то, что архитектура рендерера заголовков ужасна - чтобы настроить его, они хотят, чтобы вы также взяли на себя обработку сортировки, фильтрации, меню и т. Д. Странно, что это будет их первое предположение, но в любом случае ... По крайней мере, онидолжен предоставить innerRenderer, как они делают с ячейками.

Единственное, что они экспортируют, это headerRootComp, который кажется абсолютно бесполезным.Чтобы не взять на себя всю ответственность за сортировку и т. Д., О которой идет речь, вы должны получить компонент, который они используют для отображения заголовка по умолчанию.Обратите внимание, что это официально не экспортируется и может измениться: 

import { HeaderComp } from 'ag-grid-community/dist/lib/headerRendering/header/headerComp';

class HeaderHTMLRenderer extends HeaderComp {
  init(params) {
    super.init(params);
    this.eGui.querySelector('[ref="eText"]').innerHTML = params.displayName;
  }
}

Передайте это как средство визуализации по умолчанию: 

defaultColDef={{
  headerComponent: HeaderHTMLRenderer,
}}
0 голосов
/ 22 марта 2019

Если вы не хотите создавать компонент рендеринга, на самом деле самый простой подход - применить класс css: 

gridOptions.columnDefs = [
    {
        headerName: 'MyCol',
        headerClass: 'col-css-class',
        ...
    };

Если вам нужно что-то более сложное, вы не сможете сделать это без компонента рендеринга.

...