类似于Excel的复制粘贴功能,可使用React和网格库将数据添加到网格中

时间:2019-03-12 04:35:55

标签: reactjs grid ag-grid react-data-grid

我正在使用前端的 react ,后端的 Java Postgres 创建一种 excel在线应用程序数据库。我正在使用一个名为ag-grid(社区版)的库。

  

现在我需要的功能之一是将数据复制并粘贴到行中   就像我们在excel中所做的一样。

网格将与Postgres链接,数据库表中的所有数据都显示在网格中,对网格所做的任何更改都将反映到数据库中,反之亦然。 / em>

具体需要是,我需要复制和粘贴功能,我需要将数据(例如从其他excel复制到我的应用程序中)复制粘贴。我应该能够创建空白行,并且应该能够将数据粘贴到那些行中,如果空白行少了,那么一旦数据(例如多行数据)被保存,它的行就应该被自动添加(如excel中一样)粘贴到一个或多个行中。当我选择保存我的应用程序时,网格数据应保存到DB。

  1. 是否可以使用ag-grid社区创建此功能?
  2. 是否还有其他为此目的推荐的库?

如果有任何资源或文档可用于此功能 然后请指点我。

2 个答案:

答案 0 :(得分:1)

以防万一有人偶然发现这个问题,我从其他网站找到了解决方案。它使用 Ag Grid 的 processDataFromClipboard 事件来定制解决方案。

https://plnkr.co/edit/lM3OtCQxpJdapHQt?preview

答案 1 :(得分:0)

ag-grid社区版不支持服务器端模型的CRUD操作-企业版支持:

https://www.ag-grid.com/javascript-grid-server-side-model-crud/

如果您坚持使用ag-grid社区,则需要自己处理编辑/网格更改,这应该不太困难。单元格编辑页面是一个很好的起点:

https://www.ag-grid.com/javascript-grid-cell-editing/

尤其是,您将需要收听 cellValueChanged rowValueChenged 事件:

https://www.ag-grid.com/javascript-grid-cell-editing/#event-cell-value-changed

事件参数将为您提供以下属性:

  • newCalue
  • oldValue
  • colDef

可用于生成更新调用。