#angular #typescript #angular7 #ag-grid
#angular #машинописный текст #angular7 #ag-grid
Вопрос:
Я использую библиотеку ag-grid в моем проекте angular 7 для создания сетки, и в ее <ag-grid-angular [rowGroupPanelShow]="rowGroupPanelShow"></ag-grid-angular> селекторе есть одно свойство, которое называется rowGroupPanelShow, как упоминалось выше.
Используя это свойство ag-grid, включите опцию перетаскивания для пользователя и простым перетаскиванием любого столбца ag-grid группирует все строки по этому конкретному столбцу.
Но я не хочу перетаскивать столбец каждый раз, когда я группирую свои строки с этим конкретным столбцом. Я хочу выполнить все это с помощью простого выпадающего списка, где выпадающий список будет содержать значения, аналогичные значениям столбцов в таблице, и когда пользователь выберет любое значение из выпадающего списка, ag-grid должен сгруппировать все строки, соответствующие этому выбранному значению, в столбцах ag-grid.
Я борюсь с проблемой за последние 10 часов. Я также много искал на официальном сайте ag-grid. Но я не получил никакого решения своей проблемы.
Подход, которому я сейчас следую, можно увидеть на изображении, прикрепленном к этому сообщению.
Комментарии:
1. Скриншоты кода слишком раздражают для работы. Замените их текстовой версией вашего кода. Кроме того, у вас будет больше шансов получить ответ, если вы создадите демонстрационную версию, показывающую проблему. Вы можете начать с этого или любого другого примера в документации .
2. Я также рассмотрел ваши предыдущие вопросы. Всегда указывайте свой код в виде текста в своих вопросах! Вы также можете добавить скриншоты, если считаете, что это необходимо для наглядности.
Ответ №1:
Я полагаю, вы пропустили документацию по 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);
}