我使用的是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加载弹出窗口,即可安静地替换表中的所有数据
您尚未显示自己的代码。也许滚动被代码中的其他东西调用了。