jQuery网页在线流程图

这是一个用来在WEB网页端设计流程图的UI组件,基于Jquery开发。可用来设计各种流程图、逻辑流图,数据流图,或者是设计某个系统中需要走流程的功能应用。

2016-08-24 10081 103 3
软件描述

HTML

<div id="demo" style="margin:10px"></div> 
<input id="submit" type="button" class="button" value='导出结果' onclick="Export()"/> 
<textarea id="result" row="6">

引入jQuery库和GooFlow相关插件:

<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript" src="GooFlow/data.js"></script> 
<script type="text/javascript" src="GooFunc.js"></script> 
<script type="text/javascript" src="json2.js"></script> 
<script type="text/javascript" src="GooFlow/codebase/GooFlow.js"></script>

调用GooFlow插件:

var property = { 
    width: 1200, 
    height: 600, 
    toolBtns: ["start round", "end round", "task round", "node", "chat", "state", "plug", "join", "fork", "complex mix"], 
    haveHead: 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 mix": "复合结点", 
    group: "组织划分框编辑开关" 
}; 
var demo; 
$(document).ready(function() { 
    demo = $.createGooFlow($("#demo"), property); 
    demo.setNodeRemarks(remark); 
    //demo.onItemDel=function(id,type){ 
    //    return confirm("确定要删除该单元吗?"); 
    //} 
    demo.loadData(jsondata); 
}); 
var out; 
function Export() { 
    document.getElementById("result").value = JSON.stringify(demo.exportData()); 
}


举报

资源举报

举报审核通过将会奖励威望

×
收藏 下载

jQuery网页在线流程图

我的威望:0已下载次数:103

登录、发帖、回帖、上传资源可获得威望

所需威望:0开始下载
网盘链接:  访问密码:
×

讨论这个工具(3)

enanhai
2016-12-21 19:11

不知道有没有开发文档

perch
2018-04-23 19:13

  下载看看

请教我南哥
2018-04-24 14:58

试试

请登录后发表评论