如何在不触发刷新的情况下更新 AG-Grid 中的行？答案

【问题标题】：How to update a row in AG-Grid without triggering a refresh?如何在不触发刷新的情况下更新 AG-Grid 中的行？
【发布时间】：2022-10-06 08:42:01
【问题描述】：

我的目标是添加一个自定义单选按钮以允许用户选择一行。目前我有

const Cell = (cellProps) => {
   const { data, node, api } = cellProps
   const selectedRow = () => {
    let { isChecked } = data
    let radioButtonLabel = \'\'
    const newRowData =[]

      api.forEachNode((currNode) => {
        const currRowData = currNode.data
        if (id === currNode.data.id) {
          currRowData.isChecked = true
          radioButtonLabel = currNode.data.name
        }
        newRowData.push(currRowData)
      }) 
    api.setRowData(newRowData)
}}

所以问题是，当用户在我的表格底部选择一行的单选按钮时，它会刷新网格（我相信 setRowData 会触发刷新）并且用户必须滚动到表格底部才能看到他们的选择.我希望能够在用户选择单选按钮时停止刷新，但不确定如何使用 AG-Grid 实现。

我发现这可能有帮助？ stackoverflow.com/q/52396687/4440629 或者如果不是，你能解释一下你想做什么不同的事情吗？

标签： javascript reactjs radio-button ag-grid

【解决方案1】：

通读this 文档。特别是关于为行 ID 提供getRowId（或getRowNodeId，具体取决于您的版本）的部分

它将使交易更加高效而无需刷新。

example

如果您只想添加一个复选框以供选择 here 是文档，但您似乎需要一个单选按钮。

var gridOptions = {
  columnDefs: columnDefs,
  rowData: rowDataA,
  rowSelection: 'single',
  animateRows: true,
  getRowId: (params) => params.data.id, // <---
};

【讨论】：