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

HTML5 herman 3380浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

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

GooFlow 特点

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

GooFlow 思维导图效果

GooFlow WEB网页端设计流程图的UI组件

基于Jquery 的 GooFlow WEB 流程图

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)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

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