GooFlow入门级使用
生活随笔
收集整理的這篇文章主要介紹了
GooFlow入门级使用
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
GooFlow api
https://gooflow.xyz/docs
demo查看地址
http://www.17sucai.com/pins/26954.html
效果預(yù)覽
代碼展示（希望水品不要太低，我的代碼使用業(yè)務(wù)地址的，自己需要修改）
html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>GooFlow練習(xí)</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> <!--加載數(shù)據(jù)--> <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(數(shù)據(jù))
var jsondata = {"title": "手機(jī)上網(wǎng)套餐辦理","nodes": {"demo_node_1": {"name": "子樹(shù)入口", "left": 295, "top": 0, "type": "start round", "width": 24, "height": 24},"demo_node_2": {"name": "廣告語(yǔ)", "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": "手機(jī)上網(wǎng)套餐", "left": 247, "top": 246, "type": "join", "width": 117, "height": 25},"demo_node_9": {"name": "夜貓?zhí)撞?#34;, "left": 64, "top": 253, "type": "join", "width": 86, "height": 24},"demo_node_15": {"name": "套餐及上網(wǎng)流量剩余查詢", "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,//是否需要展示標(biāo)題及頂部按鈕的頂部欄。headLabel: true,//是否顯示標(biāo)題initLabelText: '你好嗎',//初始化時(shí)標(biāo)題的內(nèi)容，headLabel==true時(shí)有效。headBtns: ["new", "open", "save", "undo", "redo", "reload"],//如果haveHead=true，則定義HEAD區(qū)的按鈕haveTool: true,//是否需要左邊的工具欄，這決定了渲染完成后是編輯模式還是只讀模式。toolBtns: ["start round mix", "end round", "task", "node", "chat", "state", "plug", "join", "fork", "complex mix"],haveGroup: true,//是否有節(jié)點(diǎn)連線編輯與分組泳道編輯兩種工作區(qū)狀態(tài)的切換開(kāi)關(guān)。即是否有展示或編輯分組泳道的功能。useOperStack: true,//是否要使用事務(wù)序列管理工作區(qū)內(nèi)的操作事務(wù)，選true時(shí)將開(kāi)啟撤銷undo和重做redo的功能，該設(shè)定只在編輯模式下有效 }; var gooflowBean = GooFlow.init("#demo", options); //左側(cè)工具欄鼠標(biāo)懸停提示 var remark = {cursor: "選擇指針",direct: "結(jié)點(diǎn)連線",start: "入口結(jié)點(diǎn)","end": "結(jié)束結(jié)點(diǎn)","task": "任務(wù)結(jié)點(diǎn)",node: "自動(dòng)結(jié)點(diǎn)",chat: "決策結(jié)點(diǎn)",state: "狀態(tài)結(jié)點(diǎn)",plug: "附加插件",fork: "分支結(jié)點(diǎn)","join": "聯(lián)合結(jié)點(diǎn)","complex mix": "復(fù)合結(jié)點(diǎn)",group: "組織劃分框編輯開(kāi)關(guān)", }; gooflowBean.setNodeRemarks(remark); //加載數(shù)據(jù) jsondata js對(duì)象 gooflowBean.loadData(jsondata); //導(dǎo)出數(shù)據(jù) //gooflowBean.exportData()總結(jié)：多看api和網(wǎng)上的案例
總結(jié)
以上是生活随笔為你收集整理的GooFlow入门级使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Redis源码分析之小型测试框架test
- 下一篇： 一个适用各类场合的Makefile模板