如何根据列中的特定值为 ag 网格中的整行提供背景颜色？

Question

我需要根据列中的条件为 ag 网格中的整行提供背景颜色。我没有发现这样的例子，其中整行都根据列中的某个值着色..

Answer 1

您不能在一个命令中更改整行的背景颜色。您需要通过 columnDefs 中的 cellStyle 回调设置来完成。此回调将针对行中的每个单元格调用。您需要通过更改所有单元格的颜色来更改行的颜色。

见以下列定义

{
   headerName: "Street Address", field: "StreetAddress", cellStyle: changeRowColor
}

您需要对所有列执行此操作。

这是您的 changeRowColor 函数。

function changeRowColor(params) {

   if(params.node.data[4] === 100){
      return {'background-color': 'yellow'};    
   } 

}

如果第三个单元格的值为 100，它会改变一行的颜色。

Answer 2

之前的答案有些过时（尽管仍然正确且有效），现在我们对网格的样式有了更多的控制。您可以使用 getRowStyle(params) 来完成这项工作，就像这样：

gridOptions.getRowStyle(params) {
    if (params.data.myColumnToCheck === myValueToCheck) {
        return {'background-color': 'yellow'}
    }
    return null;
}

显然，myColumnToCheck 将是您检查值的列（与您在 colDef 对象的 id/field 属性中输入的名称相同），并且 myValueToCheck 将是您希望所述列必须使该行全为黄色的值。

Answer 3

答案 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;
};

Answer 4

我为偶数行和奇数行设置了不同的颜色，你可以用任何方式来做..

    $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)'}
       }
    };

Answer 5

我希望这对其他人有帮助。在任何 table 或包括 AG Grid 在内的网格中，一个非常常见的用例是以高效的方式设置整个 table 整行的 even/odd 背景颜色。此外，这需要在排序时仍然有效。

在 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 中添加 even/odd 功能的正确方法是应用自定义 css 样式，如下所示：

您将需要 overwrite/use 此处文档中提到的 ag 变量：https://www.ag-grid.com/javascript-grid-styling/#customizing-sass-variables

我们案例中的变量名称是 .ag-grid-even class 名称，或 .ag-grid-odd class 名称。如果你只是想要一种交替的颜色来帮助提高可见性，你当然只需要一个。出于我们的目的，我们只需要一个。

以下是这个过程在我们的 repo 中的样子： 1. 创建一个自定义 css 文件，其中 overwrites/uses 其中一些 ag- class 变量名称。我们称之为 ag-theme-custom.css（我相信它需要是一个 css 文件）。

注意：我们还有 sass 变量，所以这个文件只有一条注释，我在 css 中添加的颜色是我们变量 $GREY_100 的值，所以你不要不需要那个部分

您现在会得到相同的结果，但它在排序时仍然有效。

Answer 6

如果不需要有条件地设置背景色（根据行数据），不建议使用rowStyle，[=12上写了=]:

// 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
    ));

}

Answer 7

如果您使用的是 AdapTable，那么最简单的方法是使用条件样式并将其应用于整行。这样做的好处是用户也可以轻松地在运行时间。 https://demo.adaptabletools.com/style/aggridconditionalstyledemo

Answer 8

您可以通过以下方式向每一行添加 CSS classes：

rowClass: 属性为所有行设置 CSS class。提供字符串（class 名称）或字符串数组（class 名称数组）。

getRowClass: 为每一行单独设置 class 的回调。

<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';
    }
};

您可以通过网格选项 rowClassRules.

定义可应用于包含某些 CSS classes 的规则

以下代码片段显示了使用函数和年份列中的值的 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; }
};

如何根据列中的特定值为 ag 网格中的整行提供背景颜色？

How to provide a background color for an entire row in ag grid based on a certain value in a column?

ag-grid