Мне нужно предоставить цвет фона для всей строки в сетке ag в зависимости от условия в столбце. Я не нашел таких примеров, когда вся строка окрашивается в зависимости от определенного значения в столбце ..
Как обеспечить цвет фона для всей строки в сетке ag на основе определенного значения в столбце?
Ответы (8)
Предыдущий ответ несколько устарел (хотя все еще верен и работает), и теперь у нас есть некоторый контроль над стилем сетки. Вы можете использовать getRowStyle(params)
для этой работы, вот так:
gridOptions.getRowStyle(params) {
if (params.data.myColumnToCheck === myValueToCheck) {
return {'background-color': 'yellow'}
}
return null;
}
Очевидно, myColumnToCheck
будет столбцом, по которому вы проверяете свое значение (то же имя, которое вы вводите в свойстве id / field объекта colDef), а myValueToCheck
будет значением, которое вы хотите, чтобы указанный столбец должен был сделать строку желтой. .
Надеюсь, это поможет другим. Очень распространенным вариантом использования в любой таблице или сетке, включая AG Grid, будет эффективная установка четного / нечетного цвета фона для всей строки всей таблицы. ТАКЖЕ, это должно работать при СОРТИРОВКЕ.
ВСЕ ЭТИ СПОСОБЫ ДЕЛАТЬ ЭТО В AG-GRID НЕПРАВИЛЬНЫ. Несмотря на то, что они БУДУТ работать без сортировки, они не будут обновляться должным образом, когда вы перейдете к использованию сортировки. Это связано с тем, что команда ag-grid упоминает в этой проблеме https://github.com/ag-grid/ag-grid-react/issues/77 в качестве свойств времени инициализации.
// Initialization problem
getRowClass = (params) => {
if (params.node.rowIndex % 2 === 0) {
return this.props.classes.rowEven;
}
};
<AgGridReact
getRowClass={this.getRowClass}
>
// Initialization problem
getRowStyle = (params) => {
if (params.node.rowIndex % 2 === 0) {
return this.props.classes.rowEven;
}
};
<AgGridReact
getRowStyle={this.getRowStyle}
>
// Initialization problem
rowClassRules = {
rowEven: 'node.rowIndex % 2 === 0',
}
rowClassRules = {
rowEven: (params) => params.node.rowIndex % 2 === 0,
}
<AgGridReact
rowClassRules={this.rowClassRules}
>
// Trying to change the key so a rerender happens
// Grid also listens to this so an infinite loop is likely
sortChanged = (data) => {
this.setState({ sort: Math.random()})
}
<AgGridReact
key={this.state.sort}
onSortChanged={this.sortChanged}
>
По сути, большинство вещей в сетке просто читается один раз, а не снова, вероятно, из соображений производительности для сохранения повторных рендеров.
Вы столкнетесь с этой проблемой при сортировке при выполнении любого из перечисленных выше действий:
СЛЕДУЮЩИЕ - ПРАВИЛЬНЫЙ СПОСОБ ДОСТИЖЕНИЯ ЧЕТНОЙ НЕЧЕТНОЙ ЦВЕТКИ: Правильный способ добавить четную / нечетную функциональность в ag-grid - это применить пользовательские стили CSS следующим образом:
Вам нужно будет перезаписать / использовать переменные ag, как указано в документации здесь: https://www.ag-grid.com/javascript-grid-styling/#customizing-sass-variables
Имена переменных в нашем случае - это имя класса .ag-grid-even или имя класса .ag-grid-odd. Вам, конечно, нужен только один, если вы просто хотите, чтобы чередующийся цвет помогал видимости. Для наших целей нам нужен был только один.
Вот как этот процесс выглядел в нашем репозитории: 1. Создайте собственный файл css, который перезаписывает / использует некоторые из этих имен переменных класса ag. Мы называем его ag-theme-custom.css (я считаю, что это должен быть файл css).
Примечание: у нас также есть переменные sass, поэтому в этом файле просто есть комментарий о том, что этот цвет, который я добавляю в css, является значением для нашей переменной $ GREY_100, поэтому вам не нужна эта часть
Теперь вы получите тот же результат, но он все равно будет работать при сортировке.
Ответ 2 правильный, но использованный синтаксис неправильный, и у меня возникли проблемы, пытаясь разобраться в нем. Например, попытка минимизировать ответ 2 штрих-кода. Это сработало, но, насколько я понимаю, это неправильный синтаксис.
Обратите внимание, это можно сделать встроенным или с помощью внешней функции. Например внешняя функция.
vm.gridOptions = {
columnDefs: columnDefs,
getRowStyle: getRowStyleScheduled
}
function getRowStyleScheduled(params) {
if (params.selected && params.data.status === 'SCHEDULED') {
return {
'background-color': '#455A64',
'color': '#9AA3A8'
}
} else if (params.data.status === 'SCHEDULED') {
return {
'background-color': '#4CAF50',
'color': '#F4F8F5'
};
}
return null;
};
Если вы используете AdapTable, то самый простой способ - использовать условный стиль и применить его ко всей строке. Преимущество этого заключается в том, что он может быть легко доступен пользователям во время выполнения. https://demo.adaptabletools.com/style/aggridconditionalstyledemo
Вы не можете изменить цвет фона всей строки одной командой. Это необходимо сделать с помощью настройки обратного вызова cellStyle
в columnDefs
. Этот обратный вызов будет вызываться для каждой ячейки в строке. Вам нужно изменить цвет строки, изменив цвет всех ячеек.
См. Следующее определение столбца
{
headerName: "Street Address", field: "StreetAddress", cellStyle: changeRowColor
}
Вам нужно сделать это для всех ваших столбцов.
Вот ваша changeRowColor
функция.
function changeRowColor(params) {
if(params.node.data[4] === 100){
return {'background-color': 'yellow'};
}
}
Он меняет цвет строки, если значение третьей ячейки равно 100.
Я установил разные цвета для четных и нечетных строк, вы можете сделать это как угодно ..
$scope.gridOptions.getRowStyle = function getRowStyleScheduled(params){
if(parseInt(params.node.id)%2==0) {
return {'background-color': 'rgb(87, 90, 90)'}
}else {
return {'background-color': 'rgb(74, 72, 72)'}
}
};
Вы можете добавить классы CSS в каждую строку следующими способами:
rowClass: свойство для установки класса CSS для всех строк. Укажите строку (имя класса) или массив строк (массив имен классов).
getRowClass: Обратный вызов для установки класса для каждой строки отдельно.
<ag-grid-angular
[rowClass]="rowClass"
[getRowClass]="getRowClass"
/* other grid options ... */>
</ag-grid-angular>
// all rows assigned CSS class 'my-green-class'
this.rowClass = 'my-green-class';
// all even rows assigned 'my-shaded-effect'
this.getRowClass = params => {
if (params.node.rowIndex % 2 === 0) {
return 'my-shaded-effect';
}
};
Вы можете определить правила, которые могут применяться для включения определенных классов CSS, с помощью параметра сетки rowClassRules.
Следующий фрагмент показывает rowClassRules, которые используют функции и значение из столбца года:
<ag-grid-angular
[rowClassRules]="rowClassRules"
/* other grid options ... */>
</ag-grid-angular>
this.rowClassRules = {
// apply green to 2008
'rag-green-outer': function(params) { return params.data.year === 2008; },
// apply amber 2004
'rag-amber-outer': function(params) { return params.data.year === 2004; },
// apply red to 2000
'rag-red-outer': function(params) { return params.data.year === 2000; }
};
Если вам не нужно устанавливать цвет фона условно (на основе данных строки), не рекомендуется использовать rowStyle, как написано в страница документации по стилю строк:
// set background color on even rows
// again, this looks bad, should be using CSS classes
gridOptions.getRowStyle = function(params) {
if (params.node.rowIndex % 2 === 0) {
return { background: 'red' };
}
}
Вместо этого вы можете изменить цвета строк с помощью css:
@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-alpine.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";
@import "~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham-mixin";
.ag-theme-balham {
@include ag-theme-balham((
// use theme parameters where possible
odd-row-background-color: red
));
}