группировка столбцов ag-grid при выпадающем списке - PullRequest
Новая
       19

группировка столбцов ag-grid при выпадающем списке

0 голосов
/ 05 марта 2019

Я использую библиотеку ag-grid в своем проекте angular 7 для создания сетки, и у нее есть одно свойство в селекторе <ag-grid-angular [rowGroupPanelShow]="rowGroupPanelShow"></ag-grid-angular>, которое является rowGroupPanelShow, как упомянуто выше.

С помощью этого свойства ag-grid включите параметр перетаскивания для пользователя и просто перетащите любой столбец ag-grid, чтобы сгруппировать все строки по этому конкретному столбцу.

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

Я борюсь с проблемой за последние 10 часов. Я также много искал на официальном сайте ag-grid. Но у меня не было никакого решения моей проблемы.

Подход, которому я сейчас следую, можно увидеть на изображении, прикрепленном к этому сообщению.

app.component.ts 1st Part app.component.ts 2nd Part app.component.html Required ouptut image

1 Ответ

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

Полагаю, вы пропустили документацию grid-column-API

Методы управления группами строк столбцов: getRowGroupColumns() addRowGroupColumn(colKey), addRowGroupColumns(colKeys), removeRowGroupColumn(colKey), removeRowGroupColumns(colKeys), setRowGroupColumns(colKeys), moveRowGroupColumn(fromIndex, toIndex)

Таким образом, чтобы достичь раскрывающегося сценария, вы должны позаботиться о том, чтобы add и remove группировались по раскрывающимся изменениям. (* может быть и нет, но давайте сделаем так) 

<select (change)="onChange($event.target.value)">
    <option value="null">Select group</option>
    <option value="year">Year</option>
    <option value="country">Country</option>
</select>

onChange(value){
  this.gridColumnApi.getRowGroupColumns().forEach(i=>{
    this.gridColumnApi.removeRowGroupColumn(i.colId);
  })
  this.gridColumnApi.addRowGroupColumn(value);
}

Демо

...