This action will force synchronization from gooflow/GooFlow, which will overwrite any changes that you have made since you forked the repository, and can not be recovered!!!
Synchronous operation will process in the background and will refresh the page when finishing processing. Please be patient.
这是一个用来在WEB端构建流程图的JQuery插件,在线流程设计器。可设计各种流程图、逻辑流图,数据流图,或是应用系统中需要走流程的功能实现。优秀的用户体验使得操作界面很容易上手,无论开者或用户都可轻松使用。并且兼容主流浏览器(ie8--ie edge,chrome,firefox)。
官网:http://gooflow.xyz
要了解详细的使用方法,请查看API文档
本组件可免费用于非营利性项目中;如果要使用在以营利为目的软件开发项目中,请向作者购买商业使用授权,谢谢。(如果逃避购买授权,擅自窃取用作谋利,即属严重侵权行为,与盗窃无异。产生的一切任何后果责任由侵权者自负。请各位只想免费吃白饭的伸手党做好向作者本人及自己的公司、客户负全责的觉悟。)
联系方式:
微信:18648945414
QQ: 115247126
支付宝: fool-egg@163.com
checkout 本项目后,在项目所在目录先运行:
npm install
再运行:
npm run build
即可得到运行DEMO所需要的GooFlow发布版文件。
先在页头引入Css文件,在body末尾引入jquery和GooFloW主要功能文件;
<head>
<link rel="stylesheet" type="text/css" href="./dist/GooFlow.min.css"/>
</head>
<body>
<div id="demo"></div>
……
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min"></script>
<script type="text/javascript" src="./dist/GooFlow.min.js"></script>
<!-- 可选,将流程图导出为图片文件的扩展包 GooFlow.export.js -->
<script type="text/javascript" src="./dist/GooFlow.export.min.js"></script>
<!-- 可选,将流程图输出打印或另存为PDF的扩展包 GooFlow.print.js-->
<script type="text/javascript" src="./dist/GooFlow.print.min.js"></script>
<script type="text/javascript" src="./main.js"></script>
</body>
然后在业务js中调用方法;
/** main.js **/
var options = {
toolBtns:["start round mix","end round","task","node","chat","state","plug","join","fork","complex mix"],
haveHead:true,
headLabel:true,
headBtns:["new","open","save","undo","redo","reload","print"],//如果haveHead=true,则定义HEAD区的按钮
haveTool:true,
haveDashed:true,
haveGroup:true,
useOperStack:true
};
var demo;
$(document).ready(function(){
demo = GooFlow.init("#demo",options);
// demo = $.createGooFlow("#demo",options); //第二种初始化方法
demo.setNodeRemarks(remark); //remarks为左侧工具栏按钮的title提示定义
demo.loadData(jsondata); //jsondata为表达流程图详细的JSON数据
});
以RequireJs为例,先在RequireJs于项目的统一配置文件中加入如下设置,需要用到require-css(css.min.js)插件;
/** require.config.js **/
requirejs.config({
//// ……
map: {
'*': {
'css': 'https://cdn.bootcss.com/require-css/0.1.10/css.min.js' // https://github.com/guybedford/require-css, RequireJs's plugin
}
},
paths: {
jquery: 'https://cdn.bootcss.com/jquery/1.12.4/jquery.min',
GooFlow: 'dist/GooFlow.min',
'GooFlow.export': 'dist/GooFlow.export.min', //可选,将流程图导出为图片文件的扩展包
'GooFlow.print': 'dist/GooFlow.print.min', //可选,将流程图输出打印或另存为PDF的扩展包
},
shim:{
'GooFlow':{
deps:['css!../dist/GooFlow.min.css','jquery']
}
},
//// ……
});
在将会异步引入main.js入口业务文件的html页面中,body末尾加上这一段;
<body>
<div id="demo"></div>
……
<script data-main="main.js" src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
<script src="../assets/js/require.config.js"></script>
</body>
然后在具体的业务js文件中作包引入并初始化;
/** main.js **/
require(['jquery','GooFlow'], function ( $, GooFlow ) {
// 初始化的代码
var options = { …… };
var demo = GooFlow.init("#demo",options);
demo.setNodeRemarks(remark); //remarks为左侧工具栏按钮的title提示定义
demo.loadData(jsondata); //jsondata为表达流程图详细的JSON数据
});
如果想使用其它扩展包提供的功能,请务必保证在载入GooFlow.js后再载入相应的扩展包,以保证相应的功能正常;
/** main.js 扩展功能包 **/
require(['jquery', 'GooFlow'], function ( $, GooFlow ) {
require(['GooFlow.export','GooFlow.print'], function (){
// 初始化的代码
var options = { …… };
var demo = GooFlow.init("#demo",options);
demo.setNodeRemarks(remark); //remarks为左侧工具栏按钮的title提示定义
demo.setHeadToolsRemarks(headBtns); //headBtns为顶部标题栏按钮的title提示设置
demo.loadData(jsondata); //jsondata为表达流程图详细的JSON数据
demo.onBtnSaveClick=function(){
demo.exportDiagram(exportName);//流程图导出图片功能
}
demo.onPrintClick=function(){
demo.print();//打印流程图或另存为PDF功能
}
});
});
更新历史:
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。