Java基础、中级、高级、架构面试资料
    你的位置：业余草 > HTML5 > 在线流程图设计器GOOflow插件使用详解

    在线流程图设计器GOOflow插件使用详解

    HTML5 herman 9717浏览 0评论
    公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
    本博客日IP超过2000，PV 3000 左右，急需赞助商。
    极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
    受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
    所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
    视频教程免费领
    腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

    GooFlow 是一个用来在WEB网页端设计流程图的UI组件，在线流程设计器，基于Jquery开发。可用来设计各种流程图、逻辑流图，数据流图，或者是设计某个系统中需要走流程的功能应用。良好的用户体验使得操作界面很容易上手，技术开发人员和用户都可使用。 并且兼容主流浏览器(ie8–ie edge，chrome，firefox)。

    GooFlow 特点

    • 跨领域:流程图设计器不止用在电信领域,在其它需要IT进行技术支持的领域中都有重大作用.
    • 以下从纯技术实现层面具体描述:  页面顶部栏、左边侧边栏均可自定义；
    • 当左边的侧边栏设为不显示时，为只读状态，此时的视图区可当作是一个查看器而非编辑器。
    • 侧边工具栏除了基本和一些流程节点按钮外，还自定义新的节点按钮，自定义节点都可以有自有的图标、类型名称，定义后在使用可可在工作区内增加这些自定义节点。
    • 顶部栏可显示流程图数据组的标题，也可提供一些常用操作按钮。
    • 顶部栏的按钮，除了撤销、重做按钮外，其余按钮均可自定义点击事件。
    • 可画直线、折线；折线还可以左右/上下移动其中段。
    • 具有区域划分功能，能让用户更直观地了解哪些节点及其相互间的转换，是属于何种自定义区域内的。
    • 具有标注功能，用橙红色标注某个结点或者转换线，一般用在展示流程进度时。
    • 能直接双击结点、连线、分组区域中的文字进行编辑
    • 在对结点、连线、分组区域的各种编辑操作，如新增/删除/修改名称/重设样式或大小/移动/标注时，均可捕捉到事件，并触发自定义事件，如果自定义事件执行的方法返回FALSE，则会阻止操作。
    • 具有操作事务序列控制功能，在工作区内的各种有效操作都能记录到一个栈中，然后可以进行撤销（undo()）或重做（redo()），像典型的C/S软件一样。

    GooFlow 思维导图效果

    GooFlow WEB网页端设计流程图的UI组件

    基于Jquery 的 GooFlow WEB 流程图

    GooFlow 用法

    首先编写相关HTML代码：

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

    引入jQuery库和GooFlow相关插件：

    1
    2
    3
    4
    5
    <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插件：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    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());
    }

    在线运行效果和demo

    点击此处查看运行效果：http://runjs.cn/detail/08y6ysuo

    GooFlow 源码下载地址：http://git.oschina.net/foolegg126/gooflow/repository/archive/master

    业余草公众号

    最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

    本文原文出处：业余草： » 在线流程图设计器GOOflow插件使用详解

    相关文章推荐