替换数据后，React-tabulator 丢失滚动/选择

如何解决替换数据后，React-tabulator 丢失滚动/选择

我使用的是 react-tabulator 0.14.2 和 tabulator-tables 4.9.3。

我在 Tabulator 中显示的数据总是在变化，但我找不到如何在不滚动回顶部并丢失所选行的情况下刷新它

  const columns = [
    { title: 'First',field: 'fname',width: 120,formatter: 'textarea' },{ title: 'Last',field: 'lname',];

  const options = {
    selectable: 1,rowClick,invalidOptionWarnings: false,index: 'usid',maxHeight: '100%',};

  <ReactTabulator
    ref={listRef}
    data={[]}
    columns={columns}
    layout="fitColumns"
    options={options}
  />

（我的表有更多列，但即使是这个精简版也失败了）。

我试过了：

• 直接在元素 props 中设置数据，data={dataSrc} 而不是 data={[]}：这会触发一次明显的全表重绘
• 调用 listRef.current.table.updateOrAddData(dataSrc)
• 调用 listRef.current.table.replaceData(dataSrc)

在所有这些情况下，当我的表格太长时，它会滚动回顶部，并且在刷新时取消选择所选行。

如果我在刷新后使用 listRef.current.table.selectRow(...);，那么我可以保留选定的行，但表格仍会滚动回顶部。

我尝试使用 scrollVertical 制表符回调，但这仅给出了垂直滚动位置。我可以在更新前阅读此内容，但我不知道如何在刷新数据后恢复该滚动位置。

我看到的行为与 Tabulator 规范不符 http://tabulator.info/docs/4.9/update#alter-replace :

replaceData 函数可让您静默替换表中的所有数据，而无需更新滚动位置、排序或过滤，也无需触发 ajax 加载弹出窗口。

有关如何处理此问题的任何建议？谢谢！

解决方法

如您所见，scrollVertical 回调会告诉您滚动位置。

您可以使用 rowManager.element.scrollTop 属性来重置位置。它对我有用。

根据你的描述，应该是这样的...... listRef.current.table.rowManager.element.scrollTop = YOUR_SAVED_VALUE_FROM_scrollVertical_CALLBACK

编辑 - 注意：我在 replaceData 调用后的 promise resolve 函数中做了这个。如果您尝试在 replaceData 调用后直接执行此操作，它尚未完成且无法工作。

更多编辑：对此我注意到，如果我在加载表数据后不应用过滤器，那么我就没有问题。正是使用 addFilter，我出于其他技术原因每次都使用它来过滤掉一些数据。当我删除该操作时，执行简单的 replaceData 不会导致位置重置。没有理由重新应用与 replaceData 相同的过滤器，考虑到适当的过滤器，这确实是我自己代码中的一个错误导致它跳到顶部，库代码按设计工作。