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

Posted 2023-03-28

【中文标题】如何根据列中的某个值为 ag 网格中的整行提供背景颜色？

【英文标题】：How to provide a background color for an entire row in ag grid based on a certain value in a column?

【发布时间】：2016-03-15 23:57:14

【问题描述】：

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

【参考方案1】：

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

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

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

【讨论】：

这似乎没有在 ag-grid 网站 (angulargrid.com) 上记录，但它确实有效 :) 比必须单独设置每个单元格的样式要好得多！

您知道当此功能处于活动状态时如何保持选定的行颜色正常工作吗？我注意到启用自定义 getRowStyle 后，所选行不再更改其背景颜色。

似乎无法让 gridOptions 上的 getRowClass 工作。更喜欢使用 css 类作为样式。

如果样式不依赖于单元格值，或者如果单元格值在已知集合内（如星期一、星期二等），那么是的，添加一个类并使用 css on这是要走的路。这就是我通常做我需要的事情的方式。

谢谢 rowClassRules 对我不起作用，这行得通。

【参考方案2】：

我希望这对其他人有所帮助。在包括 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 类名。如果您只是想要一种交替的颜色来帮助提高可见度，您当然只需要一个。为了我们的目的，我们只需要一个。

这是这个过程在我们的 repo 中的样子： 1. 制作一个自定义 css 文件，覆盖/使用其中一些 ag-class 变量名称。我们称之为 ag-theme-custom.css（我相信它需要是一个 css 文件）。

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

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

【参考方案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;
;

【讨论】：

我认为答案 2 适用于已经实例化的网格。我相信它之后必须进行网格刷新。我的回答是面向实例化之前的网格配置。

【参考方案4】：

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

【参考方案5】：

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

请参阅以下列定义

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

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

这是您的changeRowColor 函数。

function changeRowColor(params) 

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

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

【参考方案6】：

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

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

【参考方案7】：

您可以通过以下方式将 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';
    
;

您可以通过网格选项 rowClassRules 定义可应用于包含某些 CSS 类的规则。

下面的 sn-p 显示了使用函数的 rowClassRules 和 year 列中的值：

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

【参考方案8】：

如果不需要有条件地设置背景颜色（根据行数据），不推荐使用rowStyle，写在row style documentation page:

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