如何使这个自定义生成的表格可编辑？使用 Ag-grid 做出反应

Posted 2023-02-18

【中文标题】如何使这个自定义生成的表格可编辑？使用 Ag-grid 做出反应

【英文标题】：How do I make this custom generated table editable? Made it using Ag-grid react

【发布时间】：2022-01-13 03:19:13

【问题描述】：

我们需要输入鉴定人、样品和试验编号。一旦我们单击“创建表”，就会根据输入的输入生成一个表。 Appraiser 是表的个数，sample 是每个表的列数，trial 是每个表的行数。我必须使表格单元格可编辑，这是我坚持的地方。 找到下面的工作代码以更好地理解它 https://codesandbox.io/s/github/nehav9311/react-ag-grid-updated

我还必须收集以 json 格式输入的数据。我该怎么做？

【参考方案1】：

ag-grid react 有一个选项，用于将列中的每个单元格更改为一个组件，例如支持在您的情况下进行编辑。完整的答案是 here 可在 ag-grid react 纪录片中找到。稍微描述一下：AgGridReact 元素有一个frameworkComponents 属性，您可以在其中添加要使用的组件而不是常规单元格，然后您可以将AgGridColumn 元素中的cellEditor 属性设置为您的自定义组件。

【讨论】：

这行得通！非常感谢！

不客气。

【参考方案2】：

根据我对 Ag-grid react 的了解和经验，您只需修改您的单元格属性，如下所示：

const dataMapp = RowcountArr.map((v) => (
  field: v,
  editable: function (params) 
    return params.node.data;
  
));

更多细节你可以简单检查单元格编辑ag-grid-react组件。

我希望它对你有用！谢谢。

【讨论】：

这也有效！非常感谢！