动态单元格值行的条件样式

Question

ag 网格上的条件行样式，我想根据用户选择的单元格值执行行样式

gridoptions.getRowStyle = function(params) {
  if (params.node.data === 'cell value typed by user in external/custom component i.e outside grid') {
    return { 'background': value selected by user in cutom componet outside grid };
  }
}

Answer 1

这里有一个 plunkr 应该会给你解决问题的想法。因为我不太了解你的组件，所以我使用了两个带按钮的输入框来设置行的背景颜色，但你也可以使用复杂的样式。

我正在使用 api.redrawRows()，因为我们正在执行的操作需要在行上进行。

Answer 2

@sandeep 的回答非常有效。我只是想用另一种方式来解决使用 context 的问题。 context 只是另一个 javascript 对象，它包含您想要在 AgGrid 中共享的任何信息。在大多数 AgGrid 回调中都可以访问数据，例如单元格渲染器、编辑器的渲染回调以及您的情况 getRowStyle 回调

const sickDays = // data from external component
const color = // data from external component

<AgGridReact
  getRowStyle={(params) => {
    const { styles, data } = params.context;

    if (params.node.data["sickDays"] === data.sickDays) {
      return { backgroundColor: styles.color };
    }
    return null;
  }}
  context={{
    data: { sickDays },
    styles: { color }
  }}
/>

动态单元格值行的条件样式

Conditional styling on row for dynamic cell value

reactjs

ag-grid

ag-grid-react

现场演示