wangduanduan / jsplumb-chinese-tutorial

jsplumb中文教程, README中没有的内容,可以查看项目的Wiki。有问题提issue

Home Page:https://github.com/wangduanduan/jsplumb-chinese-tutorial/wiki

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

我如何获取连线后的数据格式?

Fiv5 opened this issue · comments

我使用社区版的代码集成到了 react 应用里,场景是做一个 1 对 N 的匹配模型,UI 层已经处理好了,但我还不知道如何获得连线之后的数据模型以便我处理好后返给后端?
image

jsplumb并不知道你的数据结构。

当某个连线被建立时,会触发connection事件。

你需要订阅这个事件。这个事件会告诉你很多信息,包括从哪个点连接到哪个点。

你需要分析这个事件,然后修改你的数据结构。

首先你要有个基本的数据结构,例如:

[
{
  id: 1,
  link: ''
}, 
{
  id: 2,
  link: ''
}]

当你收到连接建立事件后,例如1连接到了2, 你需要修改这个数据结构。

[
{
  id: 1,
  link: '2'
}, 
{
  id: 2,
  link: ''
}]

谢谢回复,这个问题已经解决了,为了方便(偷懒),我将数据存储在dom 节点上,用 id 作值,这样一来避免了每次连线时手动遍历数据结构更改,连线完要获取数据时只要将 source 和 target 的节点树遍历一下就可以了。