GooFlow.js 流程图jquery插件-BFW插件库

GooFlow.js 流程图jquery插件
第一步引入bfwone
第二步执行插件代码
示例如下
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        /*本系列框架中,一些用得上的小功能函数,一些UI必须使用到它们,用户也可以单独拿出来用*/

        //获取一个DIV的绝对坐标的功能函数,即使是非绝对定位,一样能获取到
        function getElCoordinate(dom) {
            var t = dom.offsetTop;
            var l = dom.offsetLeft;
            dom = dom.offsetParent;
            while (dom) {
                t += dom.offsetTop;
                l += dom.offsetLeft;
                dom = dom.offsetParent;
            }; return {
                top: t,
                left: l
            };
        }
        //兼容各种浏览器的,获取鼠标真实位置
        function mousePosition(ev) {
            if (!ev) ev = window.event;
            if (ev.pageX || ev.pageY) {
                return {
                    x: ev.pageX,
                    y: ev.pageY
                };
            }
            return {
                x: ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft,
                y: ev.clientY + document.documentElement.scrollTop  - document.body.clientTop
            };
        }
        //给DATE类添加一个格式化输出字串的方法
        Date.prototype.format = function(format) {
            var o = {
                "M+": this.getMonth()+1,
                //month
                "d+": this.getDate(),
                //day
                "h+": this.getHours(),
                //hour
                "m+": this.getMinutes(),
                //minute
                "s+": this.getSeconds(),
                //second  ‘
                //quarter
                "q+": Math.floor((this.getMonth()+3)/3),
                "S": this.getMilliseconds() //millisecond
            }
            if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
            for (var k in o)if (new RegExp("("+ k +")").test(format))
                format = format.replace(RegExp.$1,
                RegExp.$1.length == 1 ? o[k]:
                ("00"+ o[k]).substr((""+ o[k]).length));
            return format;
        }
        //JS]根据格式字符串分析日期（MM与自动匹配两位的09和一位的9）
        //alert(getDateFromFormat(sDate,sFormat));
        function getDateFromFormat(dateString, formatString) {
            var regDate = /\d+/g;
            var regFormat = /[YyMmdHhSs]+/g;
            var dateMatches = dateString.match(regDate);
            var formatmatches = formatString.match(regFormat);
            var date = new Date();
            for (var i = 0; i < dateMatches.length; i++) {
                switch (formatmatches[i].substring(0, 1)) {
                    case 'Y':
                        case 'y':
                            date.setFullYear(parseInt(dateMatches[i])); break;
                        case 'M':
                            date.setMonth(parseInt(dateMatches[i])-1); break;
                        case 'd':
                            date.setDate(parseInt(dateMatches[i])); break;
                        case 'H':
                            case 'h':
                                date.setHours(parseInt(dateMatches[i])); break;
                            case 'm':
                                date.setMinutes(parseInt(dateMatches[i])); break;
                            case 's':
                                date.setSeconds(parseInt(dateMatches[i])); break;
                    }
                }
                return date;
            }
            //货币分析成浮点数
            //alert(parseCurrency("￥1,900,000.12"));
            function parseCurrency(currentString) {
                var regParser = /[\d\.]+/g;
                var matches = currentString.match(regParser);
                var result = '';
                var dot = false;
                for (var i = 0; i < matches.length; i++) {
                    var temp = matches[i];
                    if (temp == '.') {
                        if (dot) continue;
                    }
                    result += temp;
                }
                return parseFloat(result);
            }

            //将#XXXXXX颜色格式转换为RGB格式，并附加上透明度
            function brgba(hex, opacity) {
                if (! /#?\d+/g.test(hex)) return hex; //如果是“red”格式的颜色值，则不转换。//正则错误，参考后面的PS内容
                var h = hex.charAt(0) == "#" ? hex.substring(1): hex,
                r = parseInt(h.substring(0, 2), 16),
                g = parseInt(h.substring(2, 4), 16),
                b = parseInt(h.substring(4, 6), 16),
                a = opacity;
                return "rgba(" + r + "," + g + "," + b + "," + a + ")";
            }
            var demo;
            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
            };
            bready(function() {
                use(["GooFlow", "GooFlow"], function() {
                    var property = {
                        width: 1200,
                        height: 600,
                        toolBtns: ["start round", "end", "task", "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 round": "结束结点",
                        "task round": "任务结点",
                        node: "自动结点",
                        chat: "决策结点",
                        state: "状态结点",
                        plug: "附加插件",
                        fork: "分支结点",
                        "join": "联合结点",
                        "complex mix": "复合结点",
                        group: "组织划分框编辑开关"
                    };


                    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());
        }
    </script>
</head>
<body>


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

</body>
</html>
GooFlow.js 流程图jquery插件

网友评论0

chart.js

echarts.js

echarts-liquidfill.js

echarts-wordcloud.js

echarts-graph-modularity.js

d3.js

GooFlow.js

billboard.js

css-doodle.js

sequence-diagram-min.js
