在线流程图设计器GOOflow插件使用详解

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

GooFlow 是一个用来在WEB网页端设计流程图的UI组件，在线流程设计器，基于Jquery开发。可用来设计各种流程图、逻辑流图，数据流图，或者是设计某个系统中需要走流程的功能应用。良好的用户体验使得操作界面很容易上手，技术开发人员和用户都可使用。 并且兼容主流浏览器(ie8–ie edge，chrome，firefox)。

GooFlow 特点

• 跨领域:流程图设计器不止用在电信领域,在其它需要IT进行技术支持的领域中都有重大作用.
• 以下从纯技术实现层面具体描述:  页面顶部栏、左边侧边栏均可自定义；
• 当左边的侧边栏设为不显示时，为只读状态，此时的视图区可当作是一个查看器而非编辑器。
• 侧边工具栏除了基本和一些流程节点按钮外，还自定义新的节点按钮，自定义节点都可以有自有的图标、类型名称，定义后在使用可可在工作区内增加这些自定义节点。
• 顶部栏可显示流程图数据组的标题，也可提供一些常用操作按钮。
• 顶部栏的按钮，除了撤销、重做按钮外，其余按钮均可自定义点击事件。
• 可画直线、折线；折线还可以左右/上下移动其中段。
• 具有区域划分功能，能让用户更直观地了解哪些节点及其相互间的转换，是属于何种自定义区域内的。
• 具有标注功能，用橙红色标注某个结点或者转换线，一般用在展示流程进度时。
• 能直接双击结点、连线、分组区域中的文字进行编辑
• 在对结点、连线、分组区域的各种编辑操作，如新增/删除/修改名称/重设样式或大小/移动/标注时，均可捕捉到事件，并触发自定义事件，如果自定义事件执行的方法返回FALSE，则会阻止操作。
• 具有操作事务序列控制功能，在工作区内的各种有效操作都能记录到一个栈中，然后可以进行撤销（undo()）或重做（redo()），像典型的C/S软件一样。

GooFlow 思维导图效果

GooFlow 用法

首先编写相关HTML代码：

<div id="demo" style="margin:10px"></div> 
<input id="submit" type="button" class="button" value='导出结果' onclick="Export()"/> 
<textarea id="result" row="6">

引入jQuery库和GooFlow相关插件：

<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript" src="GooFlow/data.js"></script> 
<script type="text/javascript" src="GooFunc.js"></script> 
<script type="text/javascript" src="json2.js"></script> 
<script type="text/javascript" src="GooFlow/codebase/GooFlow.js"></script>

调用GooFlow插件：

var property = { 
    width: 1200, 
    height: 600, 
    toolBtns: ["start round", "end round", "task round", "node", "chat", "state", "plug", "join", "fork", "complex mix"], 
    haveHead: true, 
    headBtns: ["new", "open", "save", "undo", "redo", "reload"], 
    //如果haveHead=true，则定义HEAD区的按钮 
    haveTool: true, 
    haveGroup: true, 
    useOperStack: true 
}; 
var remark = { 
    cursor: "选择指针", 
    direct: "结点连线", 
    start: "入口结点", 
    "end": "结束结点", 
    "task": "任务结点", 
    node: "自动结点", 
    chat: "决策结点", 
    state: "状态结点", 
    plug: "附加插件", 
    fork: "分支结点", 
    "join": "联合结点", 
    "complex mix": "复合结点", 
    group: "组织划分框编辑开关" 
}; 
var demo; 
$(document).ready(function() { 
    demo = $.createGooFlow($("#demo"), property); 
    demo.setNodeRemarks(remark); 
    //demo.onItemDel=function(id,type){ 
    //    return confirm("确定要删除该单元吗?"); 
    //} 
    demo.loadData(jsondata); 
}); 
var out; 
function Export() { 
    document.getElementById("result").value = JSON.stringify(demo.exportData()); 
}

在线运行效果和demo

点击此处查看运行效果：http://runjs.cn/detail/08y6ysuo

GooFlow 源码下载地址：http://git.oschina.net/foolegg126/gooflow/repository/archive/master

最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

本文原文出处：业余草： » 在线流程图设计器GOOflow插件使用详解