Ag grid 如何基于列中的某个值为ag grid中的整行提供背景色?
我需要根据列中的条件为ag网格中的整行提供背景色。我没有发现这样的示例,其中整行是基于列中的某个值着色的。您不能在一个命令中更改整行的背景色。您需要通过Ag grid 如何基于列中的某个值为ag grid中的整行提供背景色?,ag-grid,Ag Grid,我需要根据列中的条件为ag网格中的整行提供背景色。我没有发现这样的示例,其中整行是基于列中的某个值着色的。您不能在一个命令中更改整行的背景色。您需要通过columnDefs中的cellStyle回调设置来执行此操作。此回调将按行中的每个单元格调用。您需要通过更改所有单元格的颜色来更改行的颜色 请参见以下列定义 { headerName: "Street Address", field: "StreetAddress", cellStyle: changeRowColor } 您需要对所有
columnDefs
中的cellStyle
回调设置来执行此操作。此回调将按行中的每个单元格调用。您需要通过更改所有单元格的颜色来更改行的颜色
请参见以下列定义
{
headerName: "Street Address", field: "StreetAddress", cellStyle: changeRowColor
}
您需要对所有列执行此操作
这是您的changeRowColor
函数
function changeRowColor(params) {
if(params.node.data[4] === 100){
return {'background-color': 'yellow'};
}
}
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;
};
如果第三个单元格的值为100,它会更改行的颜色。前面的答案有些过时(尽管仍然正确且有效),现在我们可以对网格的样式进行更多的控制。您可以对此作业使用
getRowStyle(params)
,如下所示:
gridOptions.getRowStyle(params) {
if (params.data.myColumnToCheck === myValueToCheck) {
return {'background-color': 'yellow'}
}
return null;
}
显然,
myColumnToCheck
将是您要检查值的列(与您在colDef对象的id/field属性中输入的名称相同),而myValueToCheck
将是您希望所述列必须使行全部变为黄色的值。答案2是正确的,但使用的语法是错误的,给我带来了好几个问题。例如,试图缩小答案2的代码。它确实有效,但据我所知,它的语法不正确
注意,这可以内联完成,也可以使用外部
功能。例如,外部函数
function changeRowColor(params) {
if(params.node.data[4] === 100){
return {'background-color': 'yellow'};
}
}
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;
};
我为偶数行和奇数行设置了不同的颜色,您可以用任何方式进行设置
$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)'}
}
};
我希望这能帮助别人。在任何表格或网格(包括AG grid)中,一个非常常见的用例是以性能的方式设置整个表格整行的偶数/奇数背景色。此外,在排序时,这仍然需要工作 在AG-GRID中,所有这些方法都是错误的。即使它们在没有排序的情况下也可以工作,但在您使用排序时,它们不会正确更新。这是由于ag grid团队在本期中称之为初始化时间属性
// 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}
>
//初始化问题
getRowClass=(参数)=>{
如果(params.node.rowIndex%2==0){
返回this.props.classes.rowEven;
}
};
以下是实现奇偶着色的正确方法:
在ag grid中添加偶数/奇数功能的正确方法是应用自定义css样式,如下所示:
您需要覆盖/使用此处文档中提到的ag变量:
在我们的例子中,变量的名称是
.ag网格偶数类名或.ag网格奇数类名。当然,如果你只是想要一个交替的颜色来帮助提高可见性,你只需要一个。为了我们的目的,我们只需要一个
以下是我们回购协议中的流程:
1.制作一个自定义css文件,覆盖/使用这些ag类变量名。我们称之为ag-theme-custom.css(我认为它需要是一个css文件)
注意:我们也有sass变量,所以这个文件只是有一个注释,我在css中添加的这个颜色是我们变量$GREY_100的值,所以你不需要这个部分
现在,您将获得相同的结果,但在排序时仍然有效。
如果不需要有条件地设置背景色(基于行数据),建议不要使用行样式,如下所示:
相反,您可以使用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
));
}
如果您使用的是Adaptive,那么最简单的方法就是使用条件样式并将其应用于整行。
这样做的好处是,用户也可以轻松地在运行时使用它。
您可以通过以下方式向每行添加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类“我的绿色类”的行
this.rowClass='my green class';
//所有指定为“我的着色效果”的偶数行
this.getRowClass=params=>{
如果(params.node.rowIndex%2==0){
返回“我的阴影效果”;
}
};
您可以通过网格选项rowClassRules定义可应用于包含特定CSS类的规则
以下代码段显示了使用函数和“年份”列中的值的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; }
};
this.rowClassRules={
//2008年申请环保
'rag green outer':函数(params){return params.data.year==2008;},
//申请琥珀色2004
“rag琥珀色外部”:函数(params){return params.data.year==2004;},
//将红色应用于2000
'rag red outer':函数(params){return params.data.year==2000;}
};
这似乎没有记录在ag网格站点()上,但它的工作原理是:)比必须单独设置每个单元格的样式要好得多!您知道当此功能处于活动状态时,如何使选定的行颜色保持工作状态吗?我注意到,当启用自定义getRowStyle时,所选行不再更改其背景色。似乎无法使gridOptions上的getRowClass正常工作。喜欢使用css类作为样式。如果样式不依赖于单元格值,或者单元格值在一个已知的集合内(如星期一、星期二等),那么可以添加一个类并在其上使用css。这是我通常做我需要的事情的方式。感谢rowClassRules对我不起作用。这是有效的。我认为答案2适用于已经实例化的网格。我相信接下来必须进行网格刷新。我的答案是在实例化之前面向网格配置。