时间戳

首页 > 解决方案 > ag-Grid/Reactjs - 如何在 columnDefs 中获取单元格值

javascript - ag-Grid/Reactjs - 如何在 columnDefs 中获取单元格值

问题描述

我在 Reactjs 应用程序中使用 ag-Grid 表，我的代码片段如下所示：

const columnsDef = [
  .
  .
  {
    headerName: 'Side',
    field: UI_FIELDS.SIDE,
    width: 70,
    cellRenderer: sideRenderer,
    cellRendererParams: {
      value: "BUY"
    }
  },
  .
  .
]

function sideRenderer(params) {
  const value = _.get(params, 'value') || '';
  const styleSuffix = _.isEmpty(value) ? 'default' : value.toLowerCase();

  return `<span class="side-renderer side-renderer-${styleSuffix}">${value}</span>`;
}

value: "BUY"目前我已经在我的文件中进行了硬编码cellRendererParams，但我希望这实际上等于该列中该单元格中的任何内容，可以是BUY或SELL。

该值会影响应用于文本的 css，BUY值将显示为绿色，Sell值将显示为红色。

如何设置value为等于单元格中的实际文本而不是像这样硬编码？

标签： javascriptreactjsag-grid

解决方案

你可以做这样的事情 

const columnsDef = [
  {
    headerName: 'Side',
    field: UI_FIELDS.SIDE,
    width: 70,
    cellRenderer: (params) => params.value.toLowerCase() === 'buy' ? `<span class="side-renderer side-renderer-buy">${params.value}</span>`  : `<span class="side-renderer side-renderer-sell">${params.value}</span>
  }
]

我想这就是你想要的？如果没有，请详细说明您需要什么。

编辑：您实际上不需要传递单元格渲染参数，您可以使用 params.value 获取单元格的值

推荐阅读