基于JQUERY的WEB在线流程图设计器GOOFLOW 0.7版

 跨浏览器，可兼容IE7--IE10， FireFox， Chrome， Opera等几大内核的浏览器，且不需要浏览器再加装任何控件。 （IE7-IE8时，使用VML；IE9以上，FF，OPERA，CHROME，SAFARI上使用SVG）
 多系统兼容性、可移植性:由于只包括前台UI,因此二次开发者可很方便将本插件用在任何一种需要流程图的B/S系统应用上，流程图的详细实现逻辑完全交于后台程序开发者自己实现;对于后台,只要能返回/接收能被本插件解析的JSON格式数据即可.所以本插件可用于不同的服务器语言建立的后台上.
 跨领域:流程图设计器不止用在电信领域,在其它需要IT进行技术支持的领域中都有重大作用.

以下从纯技术实现层面具体描述:
 页面顶部栏、左边侧边栏均可自定义；
 当左边的侧边栏设为不显示时，为只读状态，此时的视图区可当作是一个查看器而非编辑器。
 侧边工具栏除了基本和一些流程节点按钮外，还自定义新的节点按钮，自定义节点都可以有自有的图标、类型名称，定义后在使用可可在工作区内增加这些自定义节点。
 顶部栏可显示流程图数据组的标题，也可提供一些常用操作按钮。
 顶部栏的按钮，除了撤销、重做按钮外，其余按钮均可自定义点击事件。
 可画直线、折线；折线还可以左右/上下移动其中段。
 具有区域划分功能，能让用户更直观地了解哪些节点及其相互间的转换，是属于何种自定义区域内的。
 具有标注功能，用橙红色标注某个结点或者转换线，一般用在展示流程进度时。
 能直接双击结点、连线、分组区域中的文字进行编辑
 在对结点、连线、分组区域的各种编辑操作，如新增/删除/修改名称/重设样式或大小/移动/标注时，均可捕捉到事件，并触发自定义事件，如果自定义事件执行的方法返回FALSE，则会阻止操作。
 具有操作事务序列控制功能，在工作区内的各种有效操作都能记录到一个栈中，然后可以进行撤销（undo()）或重做（redo()），像典型的C/S软件一样。
        0.4版改造:
        加入了只导出编辑过的节点信息的功能,用户可快速保存这些少量信息而不用保存整个流程图.
        加入了一个新的扁平化样式可选用.
　　    0.5版本中,结点的样式不再受到原有程序的限制，所有样式均默认为淡蓝色长方形；如果要指定为圆形，可在初始化时定义结点类型为”原有类型”+” round”；如果要指定为复合结点，则可在初始化时定义结点类型为”原有类型”+” mix”。”原有类型”+” myType”中的myType可为自己写的一种特殊样式类.
原有的BUG已经修复，可以放心下载了。
        0.6版中，修正了一些BUG改善了用户体验，并支持按DEL键进行删除的快捷功能。
      0.7版中，修正了一些BUG，增加了连线变更要连的起始结点或结束结点的功能。
原来有一个贴子，日子长了无法编辑，现新开一个贴子放最新版本。

评论

17 楼 luokery 2016-04-28  

现在博主在哪里混?

16 楼 error_exception 2015-10-23  

楼主你好,不知道支不支持浏览模式下的节点单击事件啊

15 楼 luoxiao4533584 2015-03-30  

经常来看看有没有更新，目前最高版本是 0.8 版吧？
总之能看到楼主现身还是很高兴的。

14 楼 sdlddr 2015-03-23  

luoxiao4533584 写道

楼主至少有半年没出现了。唉。

miracle4434 写道

感谢楼主的共享：
这里有两个问题。
loadData(data) 函数有问题。
（1）我要加载两个json 数据，maxnum 只会取最后一个json的initnum
（2）只会原样加载当前json 的数据
如果当前是已编辑状态， 比如在编辑 主流程的时候 想载入之前编辑好的一个流程作为分支如果节点id 一样。
会出现节点重合。或者节点重名问题。
可否改进下？

请去论坛里找同名的贴子，这个博客文好久不维护了，你说的问题，只要在保存时，不要用自动生成的ID，用你自己定义的新ID规则就行了。

13 楼 luoxiao4533584 2015-03-09  

楼主至少有半年没出现了。唉。

miracle4434 写道

感谢楼主的共享：
这里有两个问题。
loadData(data) 函数有问题。
（1）我要加载两个json 数据，maxnum 只会取最后一个json的initnum
（2）只会原样加载当前json 的数据
如果当前是已编辑状态， 比如在编辑 主流程的时候 想载入之前编辑好的一个流程作为分支如果节点id 一样。
会出现节点重合。或者节点重名问题。
可否改进下？

12 楼 miracle4434 2015-03-02  

感谢楼主的共享：
这里有两个问题。
loadData(data) 函数有问题。
（1）我要加载两个json 数据，maxnum 只会取最后一个json的initnum
（2）只会原样加载当前json 的数据
如果当前是已编辑状态， 比如在编辑 主流程的时候 想载入之前编辑好的一个流程作为分支如果节点id 一样。
会出现节点重合。或者节点重名问题。
可否改进下？

11 楼 清风自来 2014-12-25  

非常感谢LZ的无私奉献，找了好久的东西，比较适合我

10 楼 kjkhi 2014-12-10  

如何让工作区充满整个屏幕啊？

9 楼 lxhefeiyancao 2014-11-18  

感谢 sdlddr 的无私贡献。
我有一个小诉求，我把 Word 文档看了两三遍后，对其中的很多函数都不太会用，因为 js 的底子比较薄，特别希望 sdlddr 能提供针对这些函数在使用时的示例，这样大家在应用中将更为得心应手。

GooFlow是极其难得的在线流程编辑器，再次向作者致敬.

8 楼 qaplwsok 2014-11-07  

请问如果在项目中使用这个控件，是否需要授权的？

7 楼 pcjavayang 2014-11-06  

不得不顶，感谢楼主的奉献精神，希望越做越好，越来越多的人使用。刚刚下载，仔细研究。

6 楼 lm1377899 2014-11-01  

请问下如何实现画布缩放？因为我才接触，如果可以的话请指点下谢谢。

5 楼 天使之翼liyi 2014-09-10  

已解决，采用字符串拼接的方法，多谢楼主

4 楼 天使之翼liyi 2014-09-09  

var rrrr = {"roleid":R[0].children[i].id,"rolename":R[0].children[i].name}
demo.$nodeData[id].Roles.push(rrrr);
楼主，我想问下，我上面这么操作会提示报错啊，我该怎么对您定义的这种形式的JSON数据进行添加数据呢？
{"title":"newFlow_1","nodes":{"demo_node_1":{"name":"node_1","left":101,"top":86,"type":"start round","width":24,"height":24,"alt":true},"demo_node_2":{"name":"node_2","left":119,"top":156,"type":"node","width":86,"height":24,"alt":true}}这个是您定义的JSON数据

{ "title": "newFlow_1", "nodes": [ { "name": "node_1", "left": 101, "top": 86, "type": "start round", "width": 24, "height": 24, "alt": true }, { "name": "node_2", "left": 119, "top": 156, "type": "node", "width": 86, "height": 24, "alt": true } ]这个是标准的JSON数据，有点区别，我用push往里面添加数据会报错呢，该怎么解决呢？

3 楼 sdlddr 2014-08-26  

直接对$nodeData[id]操作即可。

2 楼 天使之翼liyi 2014-08-26  

你好，我想问一下，我想往节点的“属性设置”里面添加几个属性，也就是增加json的属性，点击“确定”后如何保存修改后的nodeData呢？

1 楼 天使之翼liyi 2014-08-26  

楼主好人一生平安，关注gooflow很久了