1 Star 0 Fork 27

$簡單de幸福$ / FlowDiagram

forked from 江南孤鹜 / FlowDiagram 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

FlowDiagram

基于GOJS封装的流程图设计(展示)工具类,主要分为两个工具类:

工具库依赖于go.js、jquery以及layer.js

###希望支持FlowDiagram的童鞋能够到Github给我们一个star^_^ https://github.com/mengmakies/FlowDiagram

在线demo http://www.c3dn.net/gojs/samples/demo.html

图片名称   图片名称

流程设计器操作指南:

  1. 在任意位置双击设计器空白处:新建步骤;
  2. 选中步骤,单击右键:弹出右键菜单;
  3. 鼠标滑过步骤,显示连接点,拖动连接点即可创建新的连接线;
  4. 鼠标滑过步骤:显示tooltip。

##流程图数据

{ "class": "go.GraphLinksModel",
  "modelData": {"position":"-5 -5"},
  "nodeDataArray": [
{"key":"1", "text":"开始", "figure":"Circle", "fill":"#4fba4f", "stepType":1, "loc":"90 110"},
{"key":"2", "text":"结束", "figure":"Circle", "fill":"#CE0620", "stepType":4, "loc":"770 110"},
{"key":"3", "text":"填写请假信息 ",  "loc":"210 110", "remark":""},
{"key":"4", "text":"部门经理审核 ",  "loc":"370 110", "remark":""},
{"key":"5", "text":"人事审核  ",  "loc":"640 110", "remark":""},
{"key":"6", "text":"副总经理审核  ",  "loc":"510 40", "remark":""},
{"key":"7", "text":"总经理审核  ",  "loc":"500 180", "remark":""}
 ],
  "linkDataArray": [
{"from":"1", "to":"3"},
{"from":"3", "to":"4"},
{"from":"4", "to":"5"},
{"from":"5", "to":"2"},
{"from":"4", "to":"6", "key":"1001", "text":"小于5天 ", "remark":"", "condition":"Days<5"},
{"from":"6", "to":"5"},
{"from":"4", "to":"7", "key":"1002", "text":"大于5天 ", "remark":"", "condition":"Days>5"},
{"from":"7", "to":"5"}
 ]}

1.流程图设计 flow-desinger.js

    var areaFlow = document.getElementById('mySavedModel');

    var  myDesigner= new FlowDesigner('myFlowDesignerDiv');// 流程图设计器
    myDesigner.initToolbar('myPaletteDiv');// 初始化控件面板
    myDesigner.displayFlow(areaFlow.value);// 在设计面板中显示流程图

2.流程图展示 flow-display.js

    var areaFlow = document.getElementById('mySavedModel');

    var myDisplay = new FlowDisplay('myDisplayDiv');// 流程图显示器
    
    var flowPath = '3,4,6,5';// 3,4,6,5是步骤的id,最后一个步骤为"待处理"或"已完成"的步骤
    var isCompleted = false;// "待处理"或"已结束"
    myDisplay.loadFlow(areaFlow.value);// 显示流程图
    myDisplay.animateFlowPath(flowPath, isCompleted);// 动画显示流程路径

详细代码请参考目录下的html文件: /gojs1.6.10/site/samples/_demo.html http://git.oschina.net/markies/FlowDiagram/raw/master/gojs1.6.10/site/samples/_demo.html

空文件

简介

基于GOJS封装的流程图设计(展示)工具类 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/TheEndBegins/FlowDiagram.git
git@gitee.com:TheEndBegins/FlowDiagram.git
TheEndBegins
FlowDiagram
FlowDiagram
master

搜索帮助

14c37bed 8189591 565d56ea 8189591