Question

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

Answer 1

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

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

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

Answer 2

答案2是正确的，但使用的语法是错误的，并且在尝试对其进行排序时遇到了一些问题。例如，试图缩小答案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;
};

INLINE：

vm.gridOptions = {
    columnDefs: columnDefs,
    getRowStyle: function(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 3

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

ArrayList<String> selectedPosition = new ArrayList<String>();
HashMap<Integer, String> editHash = new HashMap<Integer, String>();

Answer 4

我希望这对其他人有帮助。在任何表格或网格（包括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-theme-custom.css（我相信它必须是一个CSS文件）。

注意：我们也有sass变量，因此此文件仅带有注释，即我在css中添加的此颜色是变量$ GREY_100的值，因此您不需要该部分

您现在将获得相同的结果，但是在排序时仍然可以使用。

Answer 5

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

Answer 6

您可以通过以下方式向每一行添加 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 类的规则。

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

Answer 7

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

请参阅以下列定义

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

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

这是您的changeRowColor功能。

function changeRowColor(params) {

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

}

如果第三个单元格的值为100，则会更改行的颜色。

Answer 8

如果不需要有条件地设置背景颜色（基于行数据），则不建议使用row style documentation page上写的 rowStyle ：

Validation.ErrorTemplate

相反，您可以使用CSS更改行颜色：

TextBox

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

8 个答案: