Ag-Grid 如何通过使用向上、道氏、顶部和底部按钮来移动行(在 Angular7 代码中)



我正在使用Angular的Ag-Grid社区版本,并创建一个带有网格的UI,用户可以使用拖放功能(托管方式(在网格中移动行。用户对Ag-Grid的拖放功能不满意。

现在我必须在 UI 上提供 4 个按钮(向上、向下、顶部和底部(来分别移动行。我无法在文档中找到任何属性/方法来执行此类功能。我可以在这方面得到任何帮助吗?

我在 Angular2 + Ag-grid 上遇到了类似的问题 - 是否可以使用按钮向上/向下移动一行?但我认为答案在功能方面是不合适的。

我已经尝试过拖放,但网格并没有为用户提供良好的体验。

您链接到的答案提示了可用的解决方案。基本上,您首先需要一种方法来控制行的显示顺序。我建议你向数据对象添加一个数字"rowIndex"属性,并将其放在一个隐藏的列中。然后对这个隐藏列上的网格进行排序。

让向上和向下按钮调用重新计算行上的 rowIndex 值的方法。

当然,如果要保持此顺序,则必须禁用网格中的排序。

另一种选择不是维护数据的 rowIndex,而是向网格显示一个数据数组,并使网格保持未排序。网格按数据在数组中存在的顺序显示数据。要移动行,请创建一个新数组,并将行移动到所需位置。

最新更新