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庫！！！

總結

以上是生活随笔為你收集整理的jquery 流程图_使用 JQuery.Flowchart的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。