GooFlow入门级使用

GooFlow api

https://gooflow.xyz/docs

demo查看地址

http://www.17sucai.com/pins/26954.html

效果预览

代码展示（希望水品不要太低，我的代码使用业务地址的，自己需要修改）

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>GooFlow练习</title><!--jQuery--><script type="text/javascript" rel="stylesheet" src="/static/jquery/jquery-1.11.0.js"></script><!--GooFlow--><link rel="stylesheet" href="/static/third/GooFlow/1.3.5/GooFlow.min.css"><script type="text/javascript" src="/static/third/GooFlow/1.3.5/GooFlow.min.js"></script><script type="text/javascript" src="/static/third/GooFlow/1.3.5/GooFlow.export.min.js"></script><script type="text/javascript" src="/static/third/GooFlow/1.3.5/GooFlow.xml.min.js"></script><script type="text/javascript" src="/static/third/GooFlow/1.3.5/GooFlow.print.min.js"></script></head>
<body><div id="demo"></div>
<!--加载数据-->
<script type="text/javascript" src="/static/js/mb/threeLevel/test-data.js"></script>
<!--local-->
<script type="text/javascript" src="/static/js/mb/threeLevel/test-GooFlow.js"></script></body>
</html>

js-data(数据)

var jsondata = {"title": "手机上网套餐办理","nodes": {"demo_node_1": {"name": "子树入口", "left": 295, "top": 0, "type": "start round", "width": 24, "height": 24},"demo_node_2": {"name": "广告语", "left": 256, "top": 79, "type": "state", "width": 86, "height": 24},"demo_node_3": {"name": "菜单", "left": 265, "top": 146, "type": "join", "width": 86, "height": 24},"demo_node_7": {"name": "流量叠加包", "left": 433, "top": 149, "type": "join", "width": 109, "height": 24},"demo_node_8": {"name": "手机上网套餐", "left": 247, "top": 246, "type": "join", "width": 117, "height": 25},"demo_node_9": {"name": "夜猫套餐", "left": 64, "top": 253, "type": "join", "width": 86, "height": 24},"demo_node_15": {"name": "套餐及上网流量剩余查询", "left": 93, "top": 140, "type": "node", "width": 119, "height": 36},"demo_node_17": {"name": "10元夜猫", "left": 106, "top": 358, "type": "node", "width": 86, "height": 24},"demo_node_18": {"name": "5元夜猫", "left": 2, "top": 363, "type": "node", "width": 86, "height": 24},"demo_node_21": {"name": "2元叠加包", "left": 591, "top": 2, "type": "node", "width": 86, "height": 24},"demo_node_22": {"name": "5元叠加包", "left": 598, "top": 45, "type": "node", "width": 86, "height": 24},"demo_node_23": {"name": "10元叠加包", "left": 603, "top": 102, "type": "node", "width": 102, "height": 24},"demo_node_24": {"name": "20元叠加包", "left": 606, "top": 147, "type": "node", "width": 106, "height": 24},"demo_node_25": {"name": "30元叠加包", "left": 597, "top": 224, "type": "node", "width": 113, "height": 24},"demo_node_26": {"name": "5元套餐", "left": 87, "top": 448, "type": "node", "width": 86, "height": 24},"demo_node_27": {"name": "8元套餐", "left": 210, "top": 405, "type": "node", "width": 86, "height": 24},"demo_node_28": {"name": "10元套餐", "left": 272, "top": 451, "type": "node", "width": 91, "height": 24},"demo_node_29": {"name": "20元套餐", "left": 341, "top": 412, "type": "node", "width": 91, "height": 24},"demo_node_30": {"name": "30元套餐", "left": 460, "top": 437, "type": "node", "width": 91, "height": 24},"demo_node_31": {"name": "50元套餐", "left": 580, "top": 464, "type": "node", "width": 92, "height": 24},"demo_node_32": {"name": "GPRS功能办理", "left": 683, "top": 464, "type": "node", "width": 130, "height": 24}},"lines": {"demo_line_4": {"type": "sl", "from": "demo_node_1", "to": "demo_node_2", "name": ""},"demo_line_5": {"type": "sl", "from": "demo_node_2", "to": "demo_node_3", "name": ""},"demo_line_11": {"type": "sl", "from": "demo_node_3", "to": "demo_node_7", "name": "2"},"demo_line_12": {"type": "sl", "from": "demo_node_3", "to": "demo_node_8", "name": "1"},"demo_line_13": {"type": "sl", "from": "demo_node_3", "to": "demo_node_9", "name": "3"},"demo_line_16": {"type": "sl", "from": "demo_node_3", "to": "demo_node_15", "name": "4"},"demo_line_19": {"type": "sl", "from": "demo_node_9", "to": "demo_node_17", "name": "2"},"demo_line_20": {"type": "sl", "from": "demo_node_9", "to": "demo_node_18", "name": "1"},"demo_line_33": {"type": "sl", "from": "demo_node_7", "to": "demo_node_21", "name": "1"},"demo_line_34": {"type": "sl", "from": "demo_node_7", "to": "demo_node_22", "name": "2"},"demo_line_35": {"type": "sl", "from": "demo_node_7", "to": "demo_node_23", "name": "3"},"demo_line_36": {"type": "sl", "from": "demo_node_7", "to": "demo_node_24", "name": "4"},"demo_line_37": {"type": "sl", "from": "demo_node_7", "to": "demo_node_25", "name": "5"},"demo_line_39": {"type": "sl", "from": "demo_node_8", "to": "demo_node_26", "name": "1"},"demo_line_42": {"type": "sl", "from": "demo_node_8", "to": "demo_node_29", "name": "4"},"demo_line_43": {"type": "sl", "from": "demo_node_8", "to": "demo_node_30", "name": "5"},"demo_line_44": {"type": "sl", "from": "demo_node_8", "to": "demo_node_31", "name": "6"},"demo_line_45": {"type": "sl", "from": "demo_node_8", "to": "demo_node_32", "name": "7"},"demo_line_46": {"type": "sl", "from": "demo_node_8", "to": "demo_node_27", "name": "2"},"demo_line_47": {"type": "sl", "from": "demo_node_8", "to": "demo_node_28", "name": "3"}},"areas": {},"initNum": 48
};

js-render(渲染)

/** createAuthor:jaden.liu* createTime:2018-04-30* version:1.0.0*/
var options = {width: 800,height: 500,haveHead: true,//是否需要展示标题及顶部按钮的顶部栏。headLabel: true,//是否显示标题initLabelText: '你好吗',//初始化时标题的内容，headLabel==true时有效。headBtns: ["new", "open", "save", "undo", "redo", "reload"],//如果haveHead=true，则定义HEAD区的按钮haveTool: true,//是否需要左边的工具栏，这决定了渲染完成后是编辑模式还是只读模式。toolBtns: ["start round mix", "end round", "task", "node", "chat", "state", "plug", "join", "fork", "complex mix"],haveGroup: true,//是否有节点连线编辑与分组泳道编辑两种工作区状态的切换开关。即是否有展示或编辑分组泳道的功能。useOperStack: true,//是否要使用事务序列管理工作区内的操作事务，选true时将开启撤销undo和重做redo的功能，该设定只在编辑模式下有效
};
var gooflowBean = GooFlow.init("#demo", options);
//左侧工具栏鼠标悬停提示
var remark = {cursor: "选择指针",direct: "结点连线",start: "入口结点","end": "结束结点","task": "任务结点",node: "自动结点",chat: "决策结点",state: "状态结点",plug: "附加插件",fork: "分支结点","join": "联合结点","complex mix": "复合结点",group: "组织划分框编辑开关",
};
gooflowBean.setNodeRemarks(remark);
//加载数据 jsondata js对象
gooflowBean.loadData(jsondata);
//导出数据
//gooflowBean.exportData()

总结：多看api和网上的案例

GooFlow入门级使用相关推荐

JabRef的入门级使用
JabRef的入门级使用 JabRef介绍一:直接导入文献BibTex源代码二:手动建立引用 Latex中编译参考文献 JabRef介绍 JabRef软件其实就是一个参考文件管理工具,极大的方便了 ...
Python Pickle模块入门级使用介绍
目录 0. 概要 1. 一个简单的例子 2. Module Interface 2.1 pickle.dump(obj, file, protocol = None, *, fix_imports = ...
xUitls3框架的入门级使用及部分解析
文章目录 xUtils3入门使用及部分解析 xUtils简介实操部分: 搭建初始化环境 1.Gradle构建时添加以下依赖: 2.加入所需要的权限: 3.进行初始化(记得是在application中 ...
SpringBoot系列：MybatisPlus的入门级使用教程(上)
作者平台: | CSDN:blog.csdn.net/qq_4115394- | 掘金:juejin.cn/user/651387- | 知乎:www.zhihu.com/people/1024- | ...
IDEA入门级使用教程----你怎么还在用eclipse？
上个月,idea的使用量超越eclipse的消息席卷了整个IT界,idea到底好在哪里呢? 最智能的IDE IDEA相对于eclipse来说最大的优点就是它比eclipse聪明.聪明到什么程度呢?我们 ...
qMISPlat入门级使用问题解答一
qMISPlat 2.0(业务配置开发平台) 自2018-4-18号正式开源以来,得到了众多.net core爱好者的关注,现将近半个月以来,大家反馈的一些使用配置方面的问题统一作如下解答. 如你对q ...
JiBX 入门级使用
简介 JiBX is a tool for binding XML data to Java objects 这是官网开篇介绍,JiBX 是绑定XML结构数据到Java对象上的工具,效率是Xstrea ...
NodeJS:redis 入门级使用示例 hgetall
var redis = require('redis'); RDS_PORT = 6379 //端口号 RDS_HOST = '172.18.xx.xx'; //服务器IP // RDS_PWD = ...
uni-app的常用功能查询，uni-app入门级使用指南。
uni-app的官方文档,功能简要查询查找标语:即使深陷泥潭,也不要忘记仰望星空文档阅读注意本文档为博主使用uni-app总结的一些常用功能的使用方法,不喜勿喷,仅供快速查找常用的功能. uni ...
Blender入门级使用
最近整理MPEG-I提案,其提供的标准视频序列是用CG合成的.其中Classroom video是在Blender软件中生成的,于是就简单的学了学如何在Blender中拍出场景和深度图. 首先是软件安 ...

GooFlow入门级使用

GooFlow入门级使用相关推荐

最新文章

热门文章