React制表机在替换数据后失去滚动/选择



我使用的是react制表器0.14.2和制表器表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}
/>

(我的表有更多的列,但即使是精简版也失败了(。

我试过:

  • 直接设置元素props中的数据,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-替换:

replaceData函数允许您无需更新滚动位置、排序或筛选,也无需触发ajax加载弹出窗口,即可静默地替换表中的所有数据。

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

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

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

根据你的描述,它应该是这样的。。。listRef.current.table.rowManager.element.scrollTop=YOUR_SAVED_VALUE_FROM_crollVertical_CALLBACK

EDIT-注意:我在replaceData调用后的promise解析函数中执行了此操作。如果您尝试在replaceData调用之后直接执行此操作,则该操作尚未完成,也无法工作。

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

replaceData函数允许您无需更新滚动位置、排序或筛选,也无需触发ajax加载弹出窗口,即可安静地替换表中的所有数据

您尚未显示自己的代码。也许滚动被代码中的其他东西调用了。

最新更新