jquery 流程图_使用 JQuery.Flowchart

https://github.com/sdrdis/jquery.flowchart​github.com

这是一个开源的 JQuery 流程图绘制库，不是非常著名。

但是这个库代码非常简洁，概念一致性很好。用用就知道 。

它是基于JQuery UI做的一个 Widget。

创建了JQuery 对象后就可以 让它渲染流程图。比如有一个 JQuery 对象 $el，$el.flowchart({})就可以开始使用了。

是一片空白，如果什么参数都没有提供。因为没有任何数据和配置，主要是没有数据。

基本概念

每个框框，我经常叫它节点是Operator，蓝色的连线叫做连接Link，Operator能跟别的Operator相连的叫做 Connector，连过来的是 Input Connector，连出去是 Output Connector。

Operator

Operator 的数据结构：

• • top (in px)
  • left (in px)
  • type: (optional)
  • properties:
    • title
    • body
    • uncontained: (optional, default: false) If true, the operator can be moved outside the container.
    • class: css classes added to the operator DOM object. If undefined, default value is the same as defaultOperatorClass.
    • inputs: Hash defining the box's input connectors. The keys define the connectors ID and the values define each connector's information as follow:
      • label: Label of the connector. If the connector is multiple, '(:i)' is replaced by the subconnector ID.
      • multipleLinks: (optional) If true, allow multiple links to this connector.
      • multiple: (optional) If true, whenever a link is created on the connector, another connector (called subconnector) is created. See the multiple connectors demo.
    • outputs: Hash defining the box's output connectors. Same structure as inputs.

节点的数据非常容易理解，里面有类型（可以任意指定），位置，标题，输入，输出。

输入、输出叫做 Connector。每个Connector 只有一个必须的字段就是 label 标签。注意的是有些信息它放在 Properties 中，是为了复用，比如多个节点共享。可能是为了成千上万个节点。

Link

• • fromOperator: ID of the operator the link comes from.
  • fromConnector: ID of the connector the link comes from.
  • fromSubConnector: (optional) If it is a multiple connector, which subconnector is it.
  • toOperator: ID of the operator the link goes to.
  • toConnector: ID of the connector the link goes to.
  • toSubConnector: (optional) If it is a multiple connector, which subconnector is it.
  • color: Color of the link. If undefined, default value is the same as defaultLinkColor.

非常清晰，一个 Link，一定是连接了两个Operator 的Connector，这里面的SubConnector可以不用考虑。如果你真的使用它，可能永远用不上。SubConnector在界面上也没有任何显示的区别。

添加 Operator 或者 Link

所有的 Flowchart的函数都 $el.flowchart("func", func_parameter...)这样使用。如添加 Operator

$el.flowchart("createOperator", operatorId, operator)

提前准备好 operatorId，和 operator的数据即可，界面上就会马上呈现。

添加Link。

$el.flowchart("createLink", linkId, link)

linkId 和 operatorId是啥，就是一个字符串或者数字都可以，就是别冲突用来分标记这个 Operator 和 Link。

当然它也有接口 addOperator 和 addLink，会动态分配 id。

初始化的时候就指定 Operator 和 Link

$el.flowchat({data: {operators: {}, links: {}}})

加上 data 参数，其中operators 和 links 都是 hash map，key是id，value 就是 Operator 和 Link 数据。

这样初始化的时候就有时机加载绘制 Operator 和 Link。

Callback 和 Event

增加、删除 Operator 或者 Link 都能产生响应的事件。可以在初始化的时候设置Callback，比如 OnOperatorMoved，当Operator移动到一个新位置后会触发一个事件_onOperatorMoved，或者直接调用 onOperatorMoved Callback。

动态设置

函数 setOperator 和 setLink 可以根据 id 动态设定 Operator 或者 Link 的属性，比如给 Operator 加个 input connector 等等。

非常高级

函数 getDataRef 可以拿到 Flowchart 内部的数据结构和HTMLELEMENT，这样可以为所欲为。但是一般的getOperator或者getData都是一个数据的copy，并不是引用。

简单介绍 Flowchart，其实它的文档写的非常好。从来没有用过这么舒服的一个JS UI库！！！