如何在 react-tabulator 中插入新行

Posted 2023-02-22

【中文标题】如何在 react-tabulator 中插入新行

【英文标题】：How to insert a new row in react-tabulator

【发布时间】：2020-04-30 03:55:00

【问题描述】：

所以这段代码是从官方文档中插入新行的：

$("#add-row").click(function()
    $("#example-table").tabulator("addRow", );
);

..但我正在使用 react-tabulator https://www.npmjs.com/package/react-tabulator

这是返回方法下面的布局：

<div>
        <button id="add-row" onClick=ReactTabulator("addRow")>Add Row</button>
      </div>
        <ReactTabulator
          columns=editableColumns
          data=data
          footerElement=<span><a href="https://www.github.com/" target="_blank">Find Me On Github</a></span>
          options=options
        />
      </div>

我是 React 新手，所以我不知道如何插入新行。什么可能是额外的信息，如果你想插入一个新行，你可以选择它是插入第一行还是最后一行，即使用以下选项 addRowPos:"bottom" 。

【参考方案1】：

我自己从未真正使用过 Tabulator，但从基于 jQuery 的方法转移到 React 主要是为了改变你思考事物的方式。在 React 中，您获取数据（状态）并根据该数据呈现您的视图（一次又一次 - 每次数据更改时）。因此，您无需在 Tabulator 本身上调用行添加功能（如您在上面的示例中所做的那样），而是修改数据（将行直接添加到其中），这反过来会导致 Tabulator 组件使用新的行。

所以，让代码说话吧，我猜。

首先，您需要将数据保存在组件的状态中：

// here we initialize your data state with empty array
// and define setData function that will be used to update 'data'
const [data, setData] = useState([]);

// here we fetch the data from somewhere,
// before your component is mounted for the first time
useEffect(() => 
    // let's say we fetch it using fetch()
    const remoteData = await fetch(...);
    // we set the data to what we fetched using setData;
    // that causes component to re-render;
    // doing data = remoteData does not trigger re-rendering
    setData(remoteData);
,[]);
// this sample assumes that the fetch operation is triggered only once, at startup,
// so that's why empty array is passed as second parameter to useEffect

现在我们可以对该数据进行修改，以便制表器在添加新行后显示它。

// we define click handler for the button
const addRowClickHandler = (event) => 
    // we're setting new value of the data array,
    // which is current content of the array plus new empty object;
    // the reason why we do it this way (by making the copy of original data)
    // is because re-rendering is based on detecting the change in the data object;
    // comparison utilizes shallow equality so even after adding new element
    // with push() data===data still returns true
    setData([...data,]);

您的视图现在应该如下所示：

<div>
    <button id="add-row" onClick=addRowClickHandler>Add Row</button>
</div>
<ReactTabulator
    columns=editableColumns
    data=data
    footerElement=<span><a href="https://www.github.com/" target="_blank">Find Me On Github</a></span>
    options=options
/>

祝你编码愉快，让我知道它是否有效；）

【讨论】：

你是对的，不要使用jquery方法。但是@Edwin在上面的答案中给出了如何在制表符表中插入行的详细实现示例。

【参考方案2】：

我遇到了同样的问题，以下对我有用。

首先，创建一个<ReactTabulator>的引用对象。

为此，请在构造函数中启动 ref：

    constructor(props) 
        super(props);
        this.tableRef = React.createRef(); //create reference object
    

并在<ReactTabulator> 中添加引用。

<div>
      </div>
        <ReactTabulator
        ref=this.tableRef
          columns=editableColumns
          data=data
          footerElement=<span><a href="https://www.github.com/" target="_blank">Find Me On Github</a></span>
          options=options
        />

您现在可以按如下方式访问制表符对象：

var tabulator = this.tableRef.current.table;

要完成您的示例和附加问题，请设置 onClick 回调：

将onAddRow 方法定义为类的一部分。它调用制表符对象 (this.tableRef.current.table) 的 addRow 方法。

根据http://tabulator.info/docs/4.0/update ： addRow 的第二个参数是可选的，它确定该行是添加到表格的顶部还是底部。值为 true 会将行添加到表格顶部，值为 false 会将行添加到表格底部。

onAddRow()
    this.tableRef.current.table.addRow(, true); //true adds to top

在构造函数中将onAddRow方法绑定到this

    constructor(props) 
        super(props);
        this.tableRef = React.createRef(); //create reference object

        // This binding is necessary to make `this` work in the callback
        this.onAddRow= this.onAddRow.bind(this);
    

点击调用addRow方法：

<button id="add-row" onClick=this.onAddRow>Add Row</button>

【讨论】：

没错。只需创建一个 ref 来引用 ReactTabulator 组件，因此我们可以访问制表器方法、回调等。