GooFlow入门级使用
生活随笔
收集整理的這篇文章主要介紹了
GooFlow入门级使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
GooFlow api
https://gooflow.xyz/docs
demo查看地址
http://www.17sucai.com/pins/26954.html
效果預覽
代碼展示（希望水品不要太低，我的代碼使用業務地址的，自己需要修改）
html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>GooFlow練習</title><!--jQuery--><script type="text/javascript" rel="stylesheet" src="/static/jquery/jquery-1.11.0.js"></script><!--GooFlow--><link rel="stylesheet" href="/static/third/GooFlow/1.3.5/GooFlow.min.css"><script type="text/javascript" src="/static/third/GooFlow/1.3.5/GooFlow.min.js"></script><script type="text/javascript" src="/static/third/GooFlow/1.3.5/GooFlow.export.min.js"></script><script type="text/javascript" src="/static/third/GooFlow/1.3.5/GooFlow.xml.min.js"></script><script type="text/javascript" src="/static/third/GooFlow/1.3.5/GooFlow.print.min.js"></script></head> <body><div id="demo"></div> <!--加載數據--> <script type="text/javascript" src="/static/js/mb/threeLevel/test-data.js"></script> <!--local--> <script type="text/javascript" src="/static/js/mb/threeLevel/test-GooFlow.js"></script></body> </html>js-data(數據)
var jsondata = {"title": "手機上網套餐辦理","nodes": {"demo_node_1": {"name": "子樹入口", "left": 295, "top": 0, "type": "start round", "width": 24, "height": 24},"demo_node_2": {"name": "廣告語", "left": 256, "top": 79, "type": "state", "width": 86, "height": 24},"demo_node_3": {"name": "菜單", "left": 265, "top": 146, "type": "join", "width": 86, "height": 24},"demo_node_7": {"name": "流量疊加包", "left": 433, "top": 149, "type": "join", "width": 109, "height": 24},"demo_node_8": {"name": "手機上網套餐", "left": 247, "top": 246, "type": "join", "width": 117, "height": 25},"demo_node_9": {"name": "夜貓套餐", "left": 64, "top": 253, "type": "join", "width": 86, "height": 24},"demo_node_15": {"name": "套餐及上網流量剩余查詢", "left": 93, "top": 140, "type": "node", "width": 119, "height": 36},"demo_node_17": {"name": "10元夜貓", "left": 106, "top": 358, "type": "node", "width": 86, "height": 24},"demo_node_18": {"name": "5元夜貓", "left": 2, "top": 363, "type": "node", "width": 86, "height": 24},"demo_node_21": {"name": "2元疊加包", "left": 591, "top": 2, "type": "node", "width": 86, "height": 24},"demo_node_22": {"name": "5元疊加包", "left": 598, "top": 45, "type": "node", "width": 86, "height": 24},"demo_node_23": {"name": "10元疊加包", "left": 603, "top": 102, "type": "node", "width": 102, "height": 24},"demo_node_24": {"name": "20元疊加包", "left": 606, "top": 147, "type": "node", "width": 106, "height": 24},"demo_node_25": {"name": "30元疊加包", "left": 597, "top": 224, "type": "node", "width": 113, "height": 24},"demo_node_26": {"name": "5元套餐", "left": 87, "top": 448, "type": "node", "width": 86, "height": 24},"demo_node_27": {"name": "8元套餐", "left": 210, "top": 405, "type": "node", "width": 86, "height": 24},"demo_node_28": {"name": "10元套餐", "left": 272, "top": 451, "type": "node", "width": 91, "height": 24},"demo_node_29": {"name": "20元套餐", "left": 341, "top": 412, "type": "node", "width": 91, "height": 24},"demo_node_30": {"name": "30元套餐", "left": 460, "top": 437, "type": "node", "width": 91, "height": 24},"demo_node_31": {"name": "50元套餐", "left": 580, "top": 464, "type": "node", "width": 92, "height": 24},"demo_node_32": {"name": "GPRS功能辦理", "left": 683, "top": 464, "type": "node", "width": 130, "height": 24}},"lines": {"demo_line_4": {"type": "sl", "from": "demo_node_1", "to": "demo_node_2", "name": ""},"demo_line_5": {"type": "sl", "from": "demo_node_2", "to": "demo_node_3", "name": ""},"demo_line_11": {"type": "sl", "from": "demo_node_3", "to": "demo_node_7", "name": "2"},"demo_line_12": {"type": "sl", "from": "demo_node_3", "to": "demo_node_8", "name": "1"},"demo_line_13": {"type": "sl", "from": "demo_node_3", "to": "demo_node_9", "name": "3"},"demo_line_16": {"type": "sl", "from": "demo_node_3", "to": "demo_node_15", "name": "4"},"demo_line_19": {"type": "sl", "from": "demo_node_9", "to": "demo_node_17", "name": "2"},"demo_line_20": {"type": "sl", "from": "demo_node_9", "to": "demo_node_18", "name": "1"},"demo_line_33": {"type": "sl", "from": "demo_node_7", "to": "demo_node_21", "name": "1"},"demo_line_34": {"type": "sl", "from": "demo_node_7", "to": "demo_node_22", "name": "2"},"demo_line_35": {"type": "sl", "from": "demo_node_7", "to": "demo_node_23", "name": "3"},"demo_line_36": {"type": "sl", "from": "demo_node_7", "to": "demo_node_24", "name": "4"},"demo_line_37": {"type": "sl", "from": "demo_node_7", "to": "demo_node_25", "name": "5"},"demo_line_39": {"type": "sl", "from": "demo_node_8", "to": "demo_node_26", "name": "1"},"demo_line_42": {"type": "sl", "from": "demo_node_8", "to": "demo_node_29", "name": "4"},"demo_line_43": {"type": "sl", "from": "demo_node_8", "to": "demo_node_30", "name": "5"},"demo_line_44": {"type": "sl", "from": "demo_node_8", "to": "demo_node_31", "name": "6"},"demo_line_45": {"type": "sl", "from": "demo_node_8", "to": "demo_node_32", "name": "7"},"demo_line_46": {"type": "sl", "from": "demo_node_8", "to": "demo_node_27", "name": "2"},"demo_line_47": {"type": "sl", "from": "demo_node_8", "to": "demo_node_28", "name": "3"}},"areas": {},"initNum": 48 };js-render(渲染)
/** createAuthor:jaden.liu* createTime:2018-04-30* version:1.0.0*/ var options = {width: 800,height: 500,haveHead: true,//是否需要展示標題及頂部按鈕的頂部欄。headLabel: true,//是否顯示標題initLabelText: '你好嗎',//初始化時標題的內容，headLabel==true時有效。headBtns: ["new", "open", "save", "undo", "redo", "reload"],//如果haveHead=true，則定義HEAD區的按鈕haveTool: true,//是否需要左邊的工具欄，這決定了渲染完成后是編輯模式還是只讀模式。toolBtns: ["start round mix", "end round", "task", "node", "chat", "state", "plug", "join", "fork", "complex mix"],haveGroup: true,//是否有節點連線編輯與分組泳道編輯兩種工作區狀態的切換開關。即是否有展示或編輯分組泳道的功能。useOperStack: true,//是否要使用事務序列管理工作區內的操作事務，選true時將開啟撤銷undo和重做redo的功能，該設定只在編輯模式下有效 }; var gooflowBean = GooFlow.init("#demo", options); //左側工具欄鼠標懸停提示 var remark = {cursor: "選擇指針",direct: "結點連線",start: "入口結點","end": "結束結點","task": "任務結點",node: "自動結點",chat: "決策結點",state: "狀態結點",plug: "附加插件",fork: "分支結點","join": "聯合結點","complex mix": "復合結點",group: "組織劃分框編輯開關", }; gooflowBean.setNodeRemarks(remark); //加載數據 jsondata js對象 gooflowBean.loadData(jsondata); //導出數據 //gooflowBean.exportData()總結：多看api和網上的案例
總結
以上是生活随笔為你收集整理的GooFlow入门级使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Redis源码分析之小型测试框架test
- 下一篇： 一个适用各类场合的Makefile模板