如何在反应中向制表器添加行并提取数据 添加行JSON 数据

如何解决如何在反应中向制表器添加行并提取数据 添加行JSON 数据

我正在使用 react-tabulator 库，想知道如何在生成制表符后添加新行。 最好在制表符下方有一个按钮，这样您每次单击时都可以添加一行。

我还想知道如何在添加行并对内容感到满意后将制表符内容提取到 JSON 输出或字符串中

解决方法

添加行

假设您已将数据数组传递到表中，您应该能够将行对象推送到该数组中，然后 Tabulator 将自动获取更改并显示它们：

因此假设您的设置类似于 Tabulator React Setup Guide

您定义数据数组的位置：

var data = [
  {id:1,name:"Oli Bob",age:"12",col:"red",dob:""},{id:2,name:"Mary May",age:"1",col:"blue",dob:"14/05/1982"},{id:3,name:"Christine Lobowski",age:"42",col:"green",dob:"22/05/1982"},{id:4,name:"Brendon Philips",age:"125",col:"orange",dob:"01/08/1980"},{id:5,name:"Margret Marmajuke",age:"16",col:"yellow",dob:"31/01/1999"},];

然后在实例化后将其传递给制表器组件：

<ReactTabulator
 data={data}
 columns={columns}
 tooltips={true}
 layout={"fitData"}
 />

然后向表中添加一行就像将新对象推送到现有数据数组一样简单：

data.push({id:6,name:"Billy Jim",age:33,col:"pink",dob:"16/07/1995"});

JSON 数据

要将数组转换为 json，您可以使用内置于 JSON.stringify 函数中的 vanilla JS：

var jsonData = JSON.stringify(data);