如何根据 AG Grid Angular 中的值设置背景颜色列 [英] How can i set background color column based on value in AG Grid Angular

问题描述

我遇到了一个问题，无法根据该行中的值设置行背景颜色.在我的情况下，它被称为 updateFlag，如果该行的值为 true，我想将行背景设置为默认白色以外的其他内容.让我更难弄清楚的是，我们以非常模块化的方法使用 ag 网格.我有一个 ag-grid-base.component，它通过 @inputs 完成每个网格的基本设置，并有一些 @outputs，如 onRowClickAction 等.然后真正想要使用网格的组件实现了 ag-grid-base.component.在组件中，我有一个函数从后端加载列定义，然后添加一个带有图标的 Action 列.

createColumnDefs(columnsList: IGridColumnAgGrid[] = this.columnsList) {this.supplementaryColumnDefs = [{headerName: '动作',宽度:70，可排序:假，抑制菜单:真，cellRendererFramework: ActionsRendererComponent,固定:'正确'，},];}

所以我正在寻找的是我将在何处以及如何根据给定行的值指定行的背景颜色，例如在我的情况下 updateFlag = true

解决方案

有一个grid选项作为函数，命名为getRowStyle，如下:

在 HTML 中:

I am running into an issue being able to set a row background color based on a value in that row. In my case it is called updateFlag and if the value for this row is true i want to set the row background to something other then the default white.
What makes this a bit harder for me to figure out is that we use ag grid in a very modular approach. I have a ag-grid-base.component which does the basic setup of each grid via @inputs and has a few @outputs like onRowClickAction etc. then the component which actually wants to use the grid implements the ag-grid-base.component. In the component i have a function which loads the column definitions from a backend and then adds a Action column which has icons.
createColumnDefs(columnsList: IGridColumnAgGrid[] = this.columnsList) {

        this.supplementaryColumnDefs = [
            {
                headerName: 'Actions',
                width: 70,
                sortable: false,
                suppressMenu: true,
                cellRendererFramework: ActionsRendererComponent,
                pinned: 'right',
            },
        ];
    }
So what i am looking for is where and how would i specify the background color of a row based on a value of a given row like in my case updateFlag = true
解决方案
There is a grid option as a function, named getRowStyle, as follows:

in HTML:
<ag-grid-angular
[gridOptions]="gridOptions"
....></ag-grid-angular>
in .ts:
import { 
  GridOptions,
} from '@ag-grid-enterprise/all-modules';
and inside of class:
gridOptions: GridOptions;
in the constructor:
constructor(){
  this.gridOptions = {

    getRowStyle: (params: any) => {
      if (params.data){
        if(params.data.flag) {
          return { background: '#eee', 'font-weight': 750 };
        }
      }
    }
  }// end of gridoptions
}// end of constructor
This is applying style what you return as a response of getRowStyle function 

I always use this method in our project, like this:

If total ('Toplam') row's value in each column is not matched with another table's totals, then total row's background color changes into red color.



                        
这篇关于如何根据 AG Grid Angular 中的值设置背景颜色列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！