ag-grid-angular - 如何为我知道 ag-grid 中行索引和字段名称的单元格着色？

Question

let, row index = 5 & field = 'age' 现在，如何在 ag-grid 中为 row = 5 & field = 'age' 的单元格着色？我已经尝试了过去两天，但未能实现这一点。

标签： ag-grid-angular

Answer 1

我想你有一个包含行索引和字段名称的对象数组：

rowIndexes = [ 
  { row: 3, field: ['age']}, 
  { row: 5, field: ['name']}, 
  { row: 10, field: ['name', 'salary'] }
];

cellStyle为每个 columnDef添加属性：

{
  headerName: 'Name',
  field: 'name',
  cellStyle: (params) => {
    let rowIndex = params.node.rowIndex;
    if (this.isColoredCell(rowIndex, 'name'))
      return { backgroundColor: 'red' }
    return null;
  }
}
...
...

并将您的逻辑添加到isColoredCell方法中：

isColoredCell(rowIndex: number, field: string): boolean {
  let indexes = this.rowIndexes.filter(item => item.row == rowIndex);
  if (indexes.length > 0) {
    let fields = indexes[0].field;
    if (fields.indexOf(field) > -1) {
      return true;
    }
    return false;
  }
  return false;
}

希望你能以这种方式为你的细胞着色。