Ag-grid 条件格式答案

【问题标题】：Ag-grid conditional formattingAg-grid 条件格式
【发布时间】：2021-04-24 15:07:39
【问题描述】：

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

基本上，包含最高值的单元格是绿色的，当它们较低时趋于红色，当它们达到中值时是黄色（在上面的链接中应用了相反的）

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

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

【问题讨论】：

编写一个函数来查看行的值，根据值计算出每个单元格应使用的颜色，并应用背景颜色example。
感谢您的回答。在您的示例中，格式是每行。如果你检查这个 plnkr.co/edit/kFh0Bir6ul8J3yDx ，你可以看到第一行 9 是绿色的，第二行 3 是绿色的。我需要的是将格式设置为好像所有数字都包含在唯一的行中，以便表格中的低数字为红色，较高的数字为绿色。
对我来说看起来是正确的，每行的最高值将是绿色，但我猜你想要整个桌子的渐变？您只需要调整逻辑以将其他行考虑在内，应该相当容易。
是的，我想要跨行的渐变，但不知道如何调整函数来获得它。
它确实可以跨行工作，每行的最高值为绿色，最低值为红色。有什么问题？

标签： javascript ag-grid

【解决方案1】：

为cellStyle编写一个函数，让这个函数查看表格中的每个值，确定它的排名，然后让它返回单元格的相关颜色，即越低，返回越多" reddish”颜色，越高，返回“greener”颜色。像这样的：

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.

【讨论】：

【解决方案2】：

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

【讨论】：

因为我希望根据每列/行的所有单元格值应用渐变
这对 OP 没有帮助，因为它仅基于该列而不是整行来格式化样式。加上它是一个 AdapTable 函数，而不是一个原生的 ag-Grid 函数。它可以在 AdapTable 中非常容易地完成，但是通过使用条件样式，因为它们可以查看样式表达式中的整行。但是，没有迹象表明 OP 正在使用我可以看到的 AdapTable。