Мне интересно, есть ли способ выбрать строку «Группировка» в ag-сетке.
Например, в примере, показанном на веб-сайте: http://www.ag-grid.com/angular-grid-grouping/index.php
Вы можете установить для параметра rowSelection значение «single», чтобы выделить всю строку в самом нижнем узле. Однако это не позволяет выделить строку «Страна».
В этом примере единственный способ сделать это - «выбрать все» элементы под этой строкой.
Спасибо!
Согласно документации, установка параметра сетки groupSelectsChildren на false сделает группирующую строку доступной для выбора независимо от ее дочерних элементов.
groupSelectsChildren: если true, выбор группы повлияет на выбор всех ее дочерних элементов. Затем группа будет отображать «выбрано», когда все дочерние элементы выбраны, «невыделено», если ни один из них не выбран, и «промежуточный», когда у детей есть сочетание выбранных и невыделенных. Когда узел выбирает потомков, он никогда не появится в выбранном наборе при вызове api.getSelectedNodes (). Если установлено false, группу можно выбрать независимо от дочерних узлов. При выборе узла группы независимо от дочерних узлов он появится в наборе при вызове api.getSelectedNodes ().
У меня была та же проблема, поэтому я решил ее обойти, имитируя внешний вид выбора строк.
В вашем объекте columnDefs добавьте атрибут cellClassRules в определение КАЖДОГО столбца (чтобы каждая ячейка была выделена, создавая впечатление, что сама строка выделяется, когда вы нажимаете на нее):
var columnDefs = [
{ headerName: "#1", cellClassRules: { rowSelected: CustomRowStyle }, field: "Col1" },
{ headerName: "#2", cellClassRules: { rowSelected: CustomRowStyle }, field: "Col2" },
{ headerName: "#3", cellClassRules: { rowSelected: CustomRowStyle }, field: "Col3" }
]
Затем добавьте прослушиватель событий для onCellClicked в свой объект gridOptions:
onCellClicked: function(cell) {
SelectedRowIndex = cell.rowIndex;
$scope.gridOptions.api.refreshView();
}
В вашем контроллере определите переменную с именем SelectedRowIndex:
var SelectedRowIndex; // this will contain the currently selected row number
Теперь создайте функцию с именем CustomRowStyle, которая вызывается ag-grid каждый раз, когда он собирается отобразить ячейку на экране. Эта функция проверяет, находится ли ячейка в той же строке, что и SelectedRowIndex (в зависимости от того, в какой строке последний раз щелкнул пользователь), чтобы определить, должна ли ячейка отображаться с классом rowSelected.
function CustomRowStyle(params) {
return params.rowIndex === SelectedRowIndex
}
Наконец, определите класс rowSelected с выбранной вами строкой CSS:
.rowSelected {
background-color: silver !important;
}
На какой бы строке вы ни щелкнули (будь то элемент группы или дочерний элемент), она появится с rowSelected CSS. Ваш контроллер всегда может узнать, какая строка выбрана в данный момент, проверив переменную SelectedRowIndex.
Это, вероятно, не сработает для всех случаев, но я обнаружил, что начиная с версии 20.2.0 RowNode имеет свойство 'parent' (Примечание: я не говорю, что эта функция была добавлена в 20.2.0, просто я не пошел и проверил предыдущие версии). Итак, я делаю это:
api.getRowNode('child-row-id').parent.setSelected(true)
Очевидно, что в зависимости от того, сколько у вас уровней группировки и насколько она динамична (например, может ли пользователь изменить конфигурацию группировки, может ли у вас быть n уровней группировки и т. Д.), Вам нужно будет обнаружить и настроить, но это хорошо работает для мой конкретный вариант использования: запоминание того, что было выбрано, и повторный выбор его при обновлении страницы, потому что моя сетка всегда начинается в одном и том же состоянии группировки при загрузке страницы.
установить groupSelectsChildren={false} и использовать этот код onRowClicked={this.onRowClicked} использовать любой уникальный идентификатор данных для выбора узла.
onRowClicked = (row) =>{
let that = this;
this.gridApi.forEachNode(node =>{
if(node.data.id === row.data.id) { that.gridApi.selectNode(node,true);}
});
}
