拓扑图编辑器-jsplumb事件

jsPlumb支持绑定到Connections，Endpoints和Overlays上的几个不同事件，以及jsPlumb对象本身。

要在jsPlumb本身（或jsPlumb实例）上绑定事件，请使用jsPlumb.bind(event, callback)

可以在jsPlumb类上绑定的事件：

info具有的属性：

originalEvent：建立连接的原始鼠标事件。

注： jsPlumb.connect或者鼠标连线时触发此事件

info具有的属性：

连接到某个节点之前放弃新拖动的Connection时不会触发此事件，可以使用connectionAborted捕获。

originalEvent：断开连接的原始鼠标事件。

info具有的属性：

注：当此事件触发时，连接的目标端点是jsPlumb用于拖动的瞬态元素，随后在建立或中止连接时将从DOM中删除。

info具有的属性：

beforeDrag 与其他拦截器的 *** 作略有不同：从拦截器函数返回false将取消当前拖动，也可以从拦截器返回一个对象，此对象将作为 data 被传进新连接的构造函数中:

如果已定义参数化连接类型，此功能特别有用。使用此机制，可以使用选择的数据填充新拖动的连接。

注: 1.7.6之前的所有jsPlumb版本，新的连接拖动以及拖动现有的连接都会触发beforeDetach。从1.7.6开始，后一种行为已被移至 beforeStartDetach拦截器。

返回false，取消拖动。

绑定到Connection上的事件，还可以使用以下bind方法：

这些是可以绑定到连线事件：

绑定到端点上的事件，使用以下bind方法：

这些是可以绑定到端点的事件：

在Overlay上注册事件侦听器是一个稍微不同的过程 - 将它们作为Overlay构造函数的参数。

以下是在Overlay上注册点击监听器的方法：

在jsPlumb对象以及Connections和Endpoints上，可以使用unbind方法删除监听器。

下一篇：拓扑图编辑器-实现过程

JavaBean(以User为例)转成json格式

1.转成JSONArray类型

User user = new User()

user.setUsername("cxl")

user.setPassword("1234")

JSONArray json = JSONArray.fromObject(user)

System.out.println(json)//[{"password":"1234","username":"cxl"}]

response.getWriter().print(json.toString())

在js文件取数据

$.getJSON("http://localhost:8080/jQueryDemo/servlet/UserServlet",null,function(data) {

alert(data[0].username)

alert(data[0].password)

})

2.转成JSONObject类型

JSONObject jsonObj = JSONObject.fromObject(user)

System.out.println(jsonObj)//{"password":"1234","username":"cxl"}

response.getWriter().print(jsonObj)

在js文件取数据

alert(data.username)

alert(data.password)

List转成json格式

List<User>users = new ArrayList<User>()

User user = new User()

user.setUsername("cxl")

user.setPassword("1234")

User u = new User()

u.setUsername("lhl")

u.setPassword("1234")

users.add(user)

users.add(u)

1.转成JSONArray类型

JSONArray json = JSONArray.fromObject(users)

System.out.println(json.toString())

//[{"password":"1234","username":"cxl"},{"password":"1234","username":"lhl"}]

response.getWriter().print(json.toString())

js中取数据：alert(alert(data[0].username))

这周去看了两天的羽毛球亚锦赛，工作有提前晚上加班做一些，但是技术文章却拉下了。

这段时间一直在寻找可以实现前端元素动态连线的功能，找了好几个库，考虑过用d3或者原生svg和canvas来实现，最后和同项目的同事商量后决定使用jsPlumb插件库来做。

jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等，其实jsPlumb可能主要是用来做流程图的，它在实现这方面的功能上非常强大，我在项目中只使用了它少部分功能，来实现项目中连线的效果。

以上是初始化jsPlumb对象的函数。

接下来获取数据，加载页面的系统和编制模块。

初始化连接锚点

//自动连线

---