农业网格条件格式

Question

是否可以使用 JS 中的框架 ag-grid 根据单元格的值应用条件背景颜色格式，例如 Excel 条件格式（例如第二个 table 格式link 是我正在努力实现的一个很好的例子。

基本上，包含最高值的单元格是绿色的，当它们降低时趋向于红色，当它们达到中值时趋向于黄色（在上面应用倒数link）

如您所见，它不是简单的 CellClassRules，因为单元格颜色取决于 table 中的单元格值，而不仅仅是特定的行或列。

我在 ag-grid 文档中没有找到这样的选项。

Answer 1

为 cellStyle 编写一个函数，让这个函数查看 table 中的每个值，确定它的排名，然后让它 return 的相关颜色单元格，即它越低，return 颜色越“偏红”，它越高，return 颜色越“绿”。像这样：

function myCellStyleFunction(params) {
  const totalCellCount = params.api.getDisplayedRowCount() * columnsCount;
  let allValuesInTable = [];

  rowData.forEach((x) => {  
    const valuesForRow = Object.keys(x).map(function (k) {
      return x[k];
    });
    allValuesInTable = allValuesInTable.concat(valuesForRow);
  });
  
  const valuesForTableOrdered = allValuesInTable.sort(function (a, b) {
    return a - b;
  });
  
  const valueIndex = valuesForTableOrdered.indexOf(params.value);
  console.log(valueIndex)
  debugger;
  const bgColour = generateColor('#FF0000','#00FF00',totalCellCount,valueIndex)

  return { backgroundColor: '#' + bgColour };
}

并在 defaultColDef 中应用此 cellStyle，以便它应用于每个单元格。

Demo.

Answer 2

您为什么不使用渐变列功能，只需单击几下它就会为您完成这一切？ https://demo.adaptabletools.com/style/aggridgradientcolumndemo

农业网格条件格式

Ag-grid conditional formatting

javascript

ag-grid