GooFlow实现一个可编辑拖拽的流程图效果代码
代码语言:html
所属分类:图表
代码描述:GooFlow实现一个可编辑拖拽的流程图效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GooFlow.js"></script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/GooFlow.css"> </head> <body> <div id="demo2" style="margin:10px"></div> <input id="submit" type="button" value='导出结果' onclick="Export()" /> <textarea id="result" row="6"></textarea> <script type="text/javascript"> var jsondata = { "title": "业务审批流程", "nodes": { "demo_node_1": { "name": "登记", "left": 20, "top": 59, "type": "start round", "width": 24, "height": 24 }, "demo_node_3": { "name": "分管领导批", "left": 335, "top": 57, "type": "task", "width": 109, "height": 40 }, "demo_node_6": { "name": "分件", "left": 73, "top": 60, "type": "fork", "width": 100, "height": 24 }, "demo_node_8": { "name": "XX科审批", "left": 172, "top": 95, "type": "task", "width": 100, "height": 24 }, "demo_node_9": { "name": "XX科审批", "left": 171, "top": 25, "type": "task", "width": 100, "height": 24 }, "demo_node_20": { "name": "局领导审批", "left": 333, "top": 184, "type": "task", "width": 111, "height": 49 }, "demo_node_23": { "name": "打证发件", "left": 172, "top": 198, "type": "task", "width": 100, "height": 24 }, "demo_node_25": { "name": "归档", "left": 17, "top": 198, "type": "end round", "width": 24, "height": 24 }}, "lines": { "demo_line_7": { "type": "sl", "from": "demo_node_1", "to": "demo_node_6", .........完整代码请登录后点击上方下载按钮下载查看
网友评论0