是否可以从 cellEditorParams 中检索值来为 ag-grid 中的列单元格着色？答案

【问题标题】：Is it possible to retrieve the values from cellEditorParams to colorize the column cells in ag-grid?是否可以从 cellEditorParams 中检索值来为 ag-grid 中的列单元格着色？
【发布时间】：2019-09-12 11:07:48
【问题描述】：

我正在尝试根据用户从单元格内的下拉菜单中选择的值为整个单元格着色。
这是我使用 cellEditorParams 定义下拉菜单并使用 cellStyle 为单元格着色的列定义。

{
  headerName: 'Year',
  field: 'year',
  width: 500,
  editable: true,
  cellEditor: 'agSelectCellEditor',
  cellEditorParams: {
    values: [
      '',
      '1 - Faible',
      '2 - Moyen ',
      '3 - Significatif',
      '4 - Elevé'
    ]
  },
  cellStyle(params) {
    const color = 'blue';
    return {
      'background-color': color
    };
  }
}

这给了我这个：

我想根据用户选择的值为单元格着色。
即：如果他选择：'1 - Faible'，则单元格的颜色将变为：绿色
如果他选择：'2 - Moyen'，则单元格的颜色将变为：橙色

等等等等。
所以这里是我需要你帮助的地方：
1/ 如何检索用户选择的值？
2/ 如何在 cellStyle 中使用它？
3/ 我这样做是否正确？

【问题讨论】：

你看过单元格渲染器吗？ ag-grid.com/javascript-grid-cell-rendering
利用cellValueChanged事件来检索使用选择的值

标签： angular html css ag-grid

【解决方案1】：

Working sample

ag-grid 中有一个名为cellClassRules 的内置选项。

 this.columnDefs = [
      {
        headerName: "Name",
        field: "name",
        width: 300,
        editable: true,
        cellEditor: "agRichSelectCellEditor",
        cellEditorParams: {
          values: [
            "Bob",
            "Harry",
            "Sally",
            "Mary",
            "John",
            "Jack",
            "Sue",
            "Sean",
            "Niall",
            "Albert",
            "Fred",
            "Jenny",
            "Larry"
          ]
        },
        cellClassRules: {
           // apply green to Bob
           'rag-green-outer': function(params) { return params.value === "Bob"},
           // apply amber Harry
           'rag-amber-outer': function(params) { return params.value === "Harry"},
           // apply red to Mary
           'rag-red-outer': function(params) { return params.value === "Mary"}
       },
      }
]

style.css

.rag-green-outer {
  background-color: green;
}

.rag-amber-outer {
  background-color: yellow;
}

.rag-red-outer{ 
  background-color: red;
}

您也可以尝试cellValueChanged 活动。那是另一种方法。

【讨论】：

agRichSelectCellEditor 不起作用。它必须替换为：agSelectCellEditor。在这种情况下，单元格不会被着色
你也必须添加这个，但它只会使文本着色：
cellRenderer(params) { return '' + params.value + ''; }
我刚刚发布了一个答案。感谢您的帮助:)

【解决方案2】：

我刚刚用最少的代码找到了我想要的解决方案，并且不需要 cellRenderer 定义：

 {
  headerName: 'Name',
  field: 'name',
  width: 300,
  editable: true,
  cellEditor: 'agSelectCellEditor',
  cellEditorParams: {
    values: [
      'Bob',
      'Harry',
      'Sally',
      'Mary',
      'John',
      'Jack',
      'Sue',
      'Sean',
      'Niall',
      'Albert',
      'Fred',
      'Jenny',
      'Larry'
    ]
  },
cellStyle(params) {
var color;
if (params.value=== 'Harry') {color='yellow'}
else
if (params.value=== 'Bob') {color='green'}
else
if (params.value=== 'Mary') {color='red'}
return {
    'background-color': color
}},

}
如果您选择 Harry，这将非常有效，整个单元格颜色将变为黄色 :)

【讨论】：