React-tabulator 在 replaceData 后失去滚动/选择答案

【问题标题】：React-tabulator looses scroll/selection after replaceDataReact-tabulator 在 replaceData 后失去滚动/选择
【发布时间】：2021-04-02 13:40:31
【问题描述】：

我正在使用 react-tabulator 0.14.2 和 tabulator-tables 4.9.3。

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

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

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

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

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

我试过了：

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

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

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

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

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

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

关于如何处理这个问题有什么建议吗？谢谢！

【问题讨论】：

标签： javascript reactjs tabulator

【解决方案1】：

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

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

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

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

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

【讨论】：