我需要根据列中的条件为 ag 网格中的整行提供背景颜色。我没有发现这样的例子,整行根据列中的某个值着色..
之前的答案有些过时(尽管仍然正确且有效),现在我们对网格的样式有了更多的控制。您可以使用
getRowStyle(params)
来完成这项工作,就像这样:
gridOptions.getRowStyle(params) {
if (params.data.myColumnToCheck === myValueToCheck) {
return {'background-color': 'yellow'}
}
return null;
}
显然,
myColumnToCheck
将是您要检查值的列(与您在 colDef 对象的 id/field 属性中输入的名称相同),而 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;
};
您可以通过以下方式向每一行添加 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; }
};
您无法在一个命令中更改整行的背景颜色。您需要通过
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)'}
}
};
如果不需要有条件地设置背景颜色(根据行数据),不建议使用rowStyle,如row style文档页面上写的:
// 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
));
}
如果您使用 AdapTable,那么最简单的方法是使用条件样式并将其应用到整行。 这样做的优点是用户也可以在运行时轻松运行。 https://demo.adaptabletools.com/style/aggridconditionalstyledemo
可以直接在AgGridReact上提供getRowStyle,如下所示
const customRowStyle = (row: any) => {
if (row.data.error) {
return {
backgroundColor: 'red'
}
}
return {};
}
<AgGridReact
getRowStyle = { customRowStyle }>
{props.dynamicColumns}
</AgGridReact>