GooFlow 1.3 工作流引擎入门

概述

GooFlow是一个极易上手、使用方便的网页端流程设计器，是基于Jquery开发。所以我们只需要引入相应的js，css就可以绘制我们自己的工作流啦。

那么下面我们就来看一下如何绘制自己的工作流。



<!-- demo.html -->

<!DOCTYPE html>


<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流程图DEMO</title>
<link rel="stylesheet" href="css/iconflow.css" />
<link rel="stylesheet" href="css/GooFlow.css" />
<link rel="stylesheet" href="css/default.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/GooFunc.js"></script>
<script type="text/javascript" src="js/GooFlow.js"></script>
<script type="text/javascript" src="js/GooFlow_color.js"></script>
<script type="text/javascript">
var property={
    width:1200,
    height:540,
    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"],//如果haveHead=true，则定义HEAD区的按钮
    haveTool:true,
    haveGroup:true,
    useOperStack:true
};
var remark={
    cursor:"选择指针",
    direct:"结点连线",
    start:"入口结点",
    "end":"结束结点",
    "task":"任务结点",
    node:"自动结点",
    chat:"决策结点",
    state:"状态结点",
    plug:"附加插件",
    fork:"分支结点",
    "join":"联合结点",
    "complex":"复合结点",
    group:"组织划分框编辑开关"
};
var demo;
$(document).ready(function(){
    demo=$.createGooFlow($("#demo"),property);
    demo.setNodeRemarks(remark);
});
var out;
function Export(){
    document.getElementById("result").value=JSON.stringify(demo.exportData());
}
</script>
</head>
<body>
<div id="demo" style="margin:10px"></div>
<input id="submit" type="button" value='导出结果' onclick="Export()"/>
<textarea id="result" row="6"></textarea>
</body>
</html>




打开demo.html，就可以看到一个空白绘图区的设计器页了！体验一下绘画流程图时行云流水的快感。


那么下面我们来看一下它界面上的绘制工具栏 。工具栏依次的顺序为：


选择指针、连接线、开始节点、结束节点、任务节点、自动节点、决策节点、状态节点、扩展附加节点、分支结点、聚合结点、复合子流程结点


最后一个不是节点，而是节点连线编辑与分组泳道编辑两种工作区状态的切换开关，当切换至分组泳道编辑后，只能操作分组泳道块，节点与连线都被锁定；反之即然


那么了解了工作栏之后我们就可以绘制自己的工作流了。







            

            
posted @ 
2018-12-29 13:42 
别来无恙啊 
阅读(1143) 
评论(0) 
 
收藏 
举报