农业网格:"How to scroll to last known position"?
ag-grid: "How to scroll to last known position"?
Ag-Grid 提供了方法 ensureIndexVisible(index, 'middle');
使用该方法可以轻松滚动到所选索引。但是我如何从用户那里得到滚动位置的最后一个已知索引?
一个例子:
我们有一个包含 600 行的 table。
用户正在滚动 - 发生更新。 table 有点变化。
现在我有了 table 滚动到顶部的行为。用户现在必须再次滚动到他的最后位置。
我想将用户重定向到上次滚动位置:ensureIndexVidisble(USERS_LAST_KNOWN_SCROLLING_POSITION, 'middle');
另外信息:用户不在table工作。所以我无法连续保存他最后一次点击。
我怎样才能做到这一点?
23.1.0 版更新(2020 年 5 月 1 日)+
使用immutableData=true
代替deltaRowDataMode=true
他们以典型的 AG 方式在他们的文档中隐藏了这条重要信息:
Method 3 - Delta Row Data The delta method is using the row data
method above but having the property deltaRowDataMode=true.
When deltaRowDataMode is on, the grid will compare the new row data
with the current row data and create a transaction object for you. The
grid then executes the change as an update transaction, keeping all of
the grids selections, filters etc.
Use this if you want to manage the data outside of the grid (eg in a
Redux store) and then let the grid work out what changes are needed to
keep the grid's version of the data up to date.
https://www.ag-grid.com/javascript-grid-data-update/#bulk-updating
在我看来,如果您的行具有唯一 ID(我希望他们这样做,这样做是个好习惯),您应该经常使用该设置。将 deltaRowDataMode
设置为 true
并使用 getRowNodeId
指定行的唯一 ID。
之后您的网格将更有效地更新(仅更新需要的内容)并且它不会跳到顶部,因为它不会在更新时重新创建网格中的每一行和单元格。
为了更好的衡量,您还可以添加 suppressScrollOnNewData
选项,但我不确定如果您执行上述操作是否需要它。
非常感谢,为了给大家腾出一些时间,这是您必须传递给 属性 [gridOptions] 的内容。只要您的数据具有唯一 ID,您就可以设置。
// gridOptions
{
...,
deltaRowDataMode: true,
getRowNodeId: function (data) {
return data.id;
},
},
Ag-Grid 提供了方法 ensureIndexVisible(index, 'middle');
使用该方法可以轻松滚动到所选索引。但是我如何从用户那里得到滚动位置的最后一个已知索引?
一个例子: 我们有一个包含 600 行的 table。 用户正在滚动 - 发生更新。 table 有点变化。 现在我有了 table 滚动到顶部的行为。用户现在必须再次滚动到他的最后位置。
我想将用户重定向到上次滚动位置:ensureIndexVidisble(USERS_LAST_KNOWN_SCROLLING_POSITION, 'middle');
另外信息:用户不在table工作。所以我无法连续保存他最后一次点击。
我怎样才能做到这一点?
23.1.0 版更新(2020 年 5 月 1 日)+
使用immutableData=true
代替deltaRowDataMode=true
他们以典型的 AG 方式在他们的文档中隐藏了这条重要信息:
Method 3 - Delta Row Data The delta method is using the row data method above but having the property deltaRowDataMode=true.
When deltaRowDataMode is on, the grid will compare the new row data with the current row data and create a transaction object for you. The grid then executes the change as an update transaction, keeping all of the grids selections, filters etc.
Use this if you want to manage the data outside of the grid (eg in a Redux store) and then let the grid work out what changes are needed to keep the grid's version of the data up to date.
https://www.ag-grid.com/javascript-grid-data-update/#bulk-updating
在我看来,如果您的行具有唯一 ID(我希望他们这样做,这样做是个好习惯),您应该经常使用该设置。将 deltaRowDataMode
设置为 true
并使用 getRowNodeId
指定行的唯一 ID。
之后您的网格将更有效地更新(仅更新需要的内容)并且它不会跳到顶部,因为它不会在更新时重新创建网格中的每一行和单元格。
为了更好的衡量,您还可以添加 suppressScrollOnNewData
选项,但我不确定如果您执行上述操作是否需要它。
非常感谢,为了给大家腾出一些时间,这是您必须传递给 属性 [gridOptions] 的内容。只要您的数据具有唯一 ID,您就可以设置。
// gridOptions
{
...,
deltaRowDataMode: true,
getRowNodeId: function (data) {
return data.id;
},
},