复杂流程图的配置生成

原创 于 2018-12-21 10:22:31 发布 · 置顶 · 3.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jsPlumb #流程图 #动态 #javascript

复杂流程图的配置生成

小记

jsPlumb使用SVG为开发者提供了一个可以形象化连接页面元素的工具
jsPlumb库不需要外部依赖
jsPlumb最后一个兼容IE8的版本为1.7.x，此后版本将只支持在现在浏览器中使用，但官方会继续维护1.7.x版本

SQL创建

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

CREATE TABLE MENU_DOC_PARENT_JD (
  CODE VARCHAR2(30 BYTE) ,
  CLS_DEMO VARCHAR2(100 BYTE) ,
  CODE_DESC VARCHAR2(255 BYTE) ,
  LEFT_CODE VARCHAR2(30 BYTE) ,
  RIGHT_CODE VARCHAR2(30 BYTE) ,
  BOTTOM_CODE VARCHAR2(30 BYTE) ,
  TOP_CODE VARCHAR2(30 BYTE) ,
  IS_PD VARCHAR2(2 BYTE) ,
  PD_DESC VARCHAR2(255 BYTE) ,
  COLUM_NUM VARCHAR2(20 BYTE) ,
  ORD VARCHAR2(20 BYTE) ,
  LEFT_DESC VARCHAR2(30 BYTE) ,
  RIGHT_DESC VARCHAR2(30 BYTE) ,
  BOTTOM_DESC VARCHAR2(30 BYTE) ,
  LEFT_CLA VARCHAR2(30 BYTE) ,
  RIGHT_CLA VARCHAR2(30 BYTE) ,
  BOTTOM_CLA VARCHAR2(30 BYTE) ,
  LEFT_OB VARCHAR2(30 BYTE) ,
  RIGHT_OB VARCHAR2(30 BYTE) ,
  BOTTOM_OB VARCHAR2(30 BYTE) ,
  TOP_DESC VARCHAR2(30 BYTE) ,
  TOP_CLA VARCHAR2(30 BYTE) ,
  TOP_OB VARCHAR2(30 BYTE) 
);
COMMENT ON COLUMN MENU_DOC_PARENT_JD.CODE IS '父节点编码';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.CLS_DEMO IS 'CLASS名称';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.CODE_DESC IS '父节点名称';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.LEFT_CODE IS '左节点编码';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.RIGHT_CODE IS '右节点编码';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.BOTTOM_CODE IS '下节点编码';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.TOP_CODE IS '上节点编码';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.IS_PD IS '1-是判断节点 2-不是判断节点';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.PD_DESC IS '判断节点悬停事件';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.COLUM_NUM IS '列数';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.ORD IS '序列';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.LEFT_DESC IS '左节点备注';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.RIGHT_DESC IS '右节点备注';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.BOTTOM_DESC IS '下节点备注';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.LEFT_CLA IS '左节点class名称';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.RIGHT_CLA IS '右节点class名称';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.BOTTOM_CLA IS '下节点class名称';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.LEFT_OB IS '左节点连接坐标 0-left 1-right 2-bottom 3-top';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.RIGHT_OB IS '右节点连接坐标 0-left 1-right 2-bottom 3-top';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.BOTTOM_OB IS '下节点连接坐标 0-left 1-right 2-bottom 3-top';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.TOP_DESC IS '上节点备注';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.TOP_CLA IS '上节点class名称';
COMMENT ON COLUMN MENU_DOC_PARENT_JD.TOP_OB IS '上节点连接坐标 0-left 1-right 2-bottom 3-top';

jsp 编写

<body data-demo-id="chart">
<div class="flow_wrap clearfix">
    <div class="flow_cont">
        <div class="flow_bottom flow_btn demo" style="height: 630px" id="canvas">
        </div>
    </div>
</div>

<script>
    var layer;
    layui.use('layer', function(){
        layer= layui.layer;
    });   //引用layer固定格式

    $(function(){
        init();
    })


    function init (){
        var init =${init};
        var html_all='';
        for (var i =0 ;i<init.length;i++){
            var demo =init[i];
            var colum_num=demo.COLUM_NUM;
            var ord=demo.ORD;
            var left =parseInt(colum_num)*15;
            var top =parseInt(ord)*7
            var html ='<div class="'+demo.CLS_DEMO+' '+demo.CODE+'" id="'+demo.CODE+'" style="left:'+ left+'em;top:'+ top+'em"'
            var demo_desc=demo.PD_DESC
            if(demo_desc!=undefined){
                html =html + ' title="'+demo_desc+'" '
            }
            html=getHtml(demo,html);
            var html=html+'><span>'+demo.CODE_DESC+'</span></div>'
            html_all=html_all+html
        }
        $("#canvas").append(html_all)
    }


    function getHtml(demo,html){
        if(demo.LEFT_CODE!=undefined){
            html=html +' demo-left-code="'+demo.LEFT_CODE+'" '
        }
        if(demo.RIGHT_CODE!=undefined){
            html=html +' demo-right-code="'+demo.RIGHT_CODE+'" '
        }
        if(demo.BOTTOM_CODE!=undefined){
            html=html +' demo-bottom-code="'+demo.BOTTOM_CODE+'" '
        }
        if(demo.TOP_CODE!=undefined){
            html=html +' demo-top-code="'+demo.TOP_CODE+'" '
        }
        if(demo.LEFT_DESC!=undefined){
            html=html +' demo-left-desc="'+demo.LEFT_DESC+'" '
        }
        if(demo.RIGHT_DESC!=undefined){
            html=html +' demo-right-desc="'+demo.RIGHT_DESC+'" '
        }
        if(demo.BOTTOM_DESC!=undefined){
            html=html +' demo-bottom-desc="'+demo.BOTTOM_DESC+'" '
        }
        if(demo.TOP_DESC!=undefined){
            html=html +' demo-top-desc="'+demo.TOP_DESC+'" '
        }
        if(demo.LEFT_CLA!=undefined){
            html=html +' demo-left-cla="'+demo.LEFT_CLA+'" '
        }
        if(demo.RIGHT_CLA!=undefined){
            html=html +' demo-right-cla="'+demo.RIGHT_CLA+'" '
        }
        if(demo.BOTTOM_CLA!=undefined){
            html=html +' demo-bottom-cla="'+demo.BOTTOM_CLA+'" '
        }
        if(demo.TOP_CLA!=undefined){
            html=html +' demo-top-cla="'+demo.TOP_CLA+'" '
        }
        if(demo.LEFT_OB!=undefined){
            html=html +' demo-left-ob="'+demo.LEFT_OB+'" '
        }
        if(demo.RIGHT_OB!=undefined){
            html=html +' demo-right-ob="'+demo.RIGHT_OB+'" '
        }
        if(demo.BOTTOM_OB!=undefined){
            html=html +' demo-bottom-ob="'+demo.BOTTOM_OB+'" '
        }
        if(demo.TOP_OB!=undefined){
            html=html +' demo-top-ob="'+demo.TOP_OB+'" '
        }
        return html;
    }

js编写

jsPlumb.ready(function () {

    var color = "gray";

    var instance = jsPlumb.getInstance({
        Connector: [ "Flowchart"],
        DragOptions: { cursor: "pointer", zIndex: 2000 },
        PaintStyle: { stroke: color, strokeWidth: 1 },
        EndpointStyle: { radius: 0, fill: color },
        HoverPaintStyle: {stroke: "#ec9f2e" },
        EndpointHoverStyle: {fill: "#ec9f2e" },
        Container: "canvas"
    });

    // suspend drawing and initialise.
    instance.batch(function () {
        var windows =jsPlumb.getSelector(".demo .window")
        for (var i = 0; i < windows.length; i++) {
            var demo_id =windows[i].getAttribute("id");

            /** code **/
            var demo_left_code=windows[i].getAttribute("demo-left-code");
            var demo_right_code=windows[i].getAttribute("demo-right-code");
            var demo_bottom_code=windows[i].getAttribute("demo-bottom-code");
            var demo_top_code=windows[i].getAttribute("demo-top-code");


            /** desc **/
            var demo_left_desc=windows[i].getAttribute("demo-left-desc");
            var demo_right_desc=windows[i].getAttribute("demo-right-desc");
            var demo_bottom_desc=windows[i].getAttribute("demo-bottom-desc");
            var demo_top_desc=windows[i].getAttribute("demo-top-desc");

            /** cla **/
            var demo_left_cla=windows[i].getAttribute("demo-left-cla");
            var demo_right_cla=windows[i].getAttribute("demo-right-cla");
            var demo_bottom_cla=windows[i].getAttribute("demo-bottom-cla");
            var demo_top_cla=windows[i].getAttribute("demo-top-cla");

            /** ob **/
            var demo_left_ob=windows[i].getAttribute("demo-left-ob");
            var demo_right_ob=windows[i].getAttribute("demo-right-ob");
            var demo_bottom_ob=windows[i].getAttribute("demo-bottom-ob");
            var demo_top_ob=windows[i].getAttribute("demo-top-ob");
            var arrowCommon = { foldback: 0.4, fill: color, width: 7 }

            if(demo_left_code!=undefined&&demo_left_code!=''){
                if(demo_left_ob!=undefined&&demo_left_ob!=''){
                    instance.addEndpoint(windows[i], {
                        uuid: windows[i].getAttribute("id") + "-left",
                        anchor: "LeftMiddle",
                        maxConnections: -1
                    })
                    var target_node=jsPlumb.getSelector("."+demo_left_code)[0]
                    //0-left 1-right 2-bottom 3-top
                    if(demo_left_ob==0){
                        instance.addEndpoint(target_node, {
                            uuid: target_node.getAttribute("id") + "-left",
                            anchor: "LeftMiddle",
                            maxConnections: -1
                        })
                        var overlays = [
                            [ "Arrow", { location: 0.7 }, arrowCommon ]
                            //[ "Arrow", { location: 0.3, direction: -1 }, arrowCommon ]
                        ];
                        if(demo_left_desc!=undefined&&demo_left_desc!=''){
                            if(demo_left_cla!=undefined&&demo_left_cla!=''){
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_left_desc,cssClass:demo_left_cla} ]
                                ];
                            }else {
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_left_desc} ]
                                ];
                            }
                        }
                        instance.connect({uuids: [windows[i].getAttribute("id") + "-left", target_node.getAttribute("id") + "-left"], overlays: overlays});
                    }
                    if(demo_left_ob==1){
                        instance.addEndpoint(target_node, {
                            uuid: target_node.getAttribute("id") + "-right",
                            anchor: "RightMiddle",
                            maxConnections: -1
                        })
                        var overlays = [
                            [ "Arrow", { location: 0.7 }, arrowCommon ]
                            //[ "Arrow", { location: 0.3, direction: -1 }, arrowCommon ]
                        ];
                        if(demo_right_desc!=undefined&&demo_right_desc!=''){
                            if(demo_right_cla!=undefined&&demo_right_cla!=''){
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_right_desc,cssClass:demo_right_cla} ]
                                ];
                            }else {
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_right_desc} ]
                                ];
                            }
                        }
                        instance.connect({uuids: [windows[i].getAttribute("id") + "-left", target_node.getAttribute("id") + "-right"], overlays: overlays});
                    }
                    if(demo_left_ob==2){
                        instance.addEndpoint(target_node, {
                            uuid: target_node.getAttribute("id") + "-bottom",
                            anchor: "BottomCenter",
                            maxConnections: -1
                        })
                        var overlays = [
                            [ "Arrow", { location: 0.7 }, arrowCommon ]
                        ];
                        if(demo_left_desc!=undefined&&demo_left_desc!=''){
                            if(demo_left_cla!=undefined&&demo_left_cla!=''){
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_left_desc,cssClass:demo_left_cla} ]
                                ];
                            }else {
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_left_desc} ]
                                ];
                            }
                        }
                        instance.connect({uuids: [windows[i].getAttribute("id") + "-left", target_node.getAttribute("id") + "-bottom"], overlays: overlays});
                    }
                    if(demo_left_ob==3){
                        instance.addEndpoint(target_node, {
                            uuid: target_node.getAttribute("id") + "-top",
                            anchor: "TopCenter",
                            maxConnections: -1
                        })
                        var overlays = [
                            [ "Arrow", { location: 0.7 }, arrowCommon ]
                        ];
                        if(demo_left_desc!=undefined&&demo_left_desc!=''){
                            if(demo_left_cla!=undefined&&demo_left_cla!=''){
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_left_desc,cssClass:demo_left_cla} ]
                                ];
                            }else {
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_left_desc} ]
                                ];
                            }
                        }
                        instance.connect({uuids: [windows[i].getAttribute("id") + "-left", target_node.getAttribute("id") + "-top"], overlays: overlays});
                    }
                }
            }


            if(demo_right_code!=undefined&&demo_right_code!=''){
                if(demo_right_ob!=undefined&&demo_right_ob!=''){
                    instance.addEndpoint(windows[i], {
                        uuid: windows[i].getAttribute("id") + "-right",
                        anchor: "RightMiddle",
                        maxConnections: -1
                    })
                    var target_node=jsPlumb.getSelector("."+demo_right_code)[0]
                    //0-left 1-right 2-bottom 3-top
                    if(demo_right_ob==0){
                        instance.addEndpoint(target_node, {
                            uuid: target_node.getAttribute("id") + "-left",
                            anchor: "LeftMiddle",
                            maxConnections: -1
                        })
                        var overlays = [
                            [ "Arrow", { location: 0.7 }, arrowCommon ]
                            //[ "Arrow", { location: 0.3, direction: -1 }, arrowCommon ]
                        ];
                        if(demo_right_desc!=undefined&&demo_right_desc!=''){
                            if(demo_right_cla!=undefined&&demo_right_cla!=''){
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_right_desc,cssClass:demo_right_cla} ]
                                ];
                            }else {
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_right_desc} ]
                                ];
                            }
                        }
                        instance.connect({uuids: [windows[i].getAttribute("id") + "-right", target_node.getAttribute("id") + "-left"], overlays: overlays});
                    }
                    if(demo_right_ob==1){
                        instance.addEndpoint(target_node, {
                            uuid: target_node.getAttribute("id") + "-right",
                            anchor: "RightMiddle",
                            maxConnections: -1
                        })
                        var overlays = [
                            [ "Arrow", { location: 0.7 }, arrowCommon ]
                            //[ "Arrow", { location: 0.3, direction: -1 }, arrowCommon ]
                        ];
                        if(demo_right_desc!=undefined&&demo_right_desc!=''){
                            if(demo_right_cla!=undefined&&demo_right_cla!=''){
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_right_desc,cssClass:demo_right_cla} ]
                                ];
                            }else {
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_right_desc} ]
                                ];
                            }
                        }
                        instance.connect({uuids: [windows[i].getAttribute("id") + "-right", target_node.getAttribute("id") + "-right"], overlays: overlays});
                    }
                    if(demo_right_ob==2){
                        instance.addEndpoint(target_node, {
                            uuid: target_node.getAttribute("id") + "-bottom",
                            anchor: "BottomCenter",
                            maxConnections: -1
                        })
                        var overlays = [
                            [ "Arrow", { location: 0.7 }, arrowCommon ]
                        ];
                        if(demo_right_desc!=undefined&&demo_right_desc!=''){
                            if(demo_right_cla!=undefined&&demo_right_cla!=''){
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_right_desc,cssClass:demo_right_cla} ]
                                ];
                            }else {
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_right_desc} ]
                                ];
                            }
                        }
                        instance.connect({uuids: [windows[i].getAttribute("id") + "-right", target_node.getAttribute("id") + "-bottom"], overlays: overlays});
                    }
                    if(demo_right_ob==3){
                        instance.addEndpoint(target_node, {
                            uuid: target_node.getAttribute("id") + "-top",
                            anchor: "TopCenter",
                            maxConnections: -1
                        })
                        var overlays = [
                            [ "Arrow", { location: 0.7 }, arrowCommon ]
                        ];
                        if(demo_right_desc!=undefined&&demo_right_desc!=''){
                            if(demo_right_cla!=undefined&&demo_right_cla!=''){
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_right_desc,cssClass:demo_right_cla} ]
                                ];
                            }else {
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_right_desc} ]
                                ];
                            }
                        }
                        instance.connect({uuids: [windows[i].getAttribute("id") + "-right", target_node.getAttribute("id") + "-top"], overlays: overlays});
                    }
                }
            }


            if(demo_bottom_code!=undefined&&demo_bottom_code!=''){
                if(demo_bottom_ob!=undefined&&demo_bottom_ob!=''){
                    instance.addEndpoint(windows[i], {
                        uuid: windows[i].getAttribute("id") + "-bottom",
                        anchor: "BottomCenter",
                        maxConnections: -1
                    })
                    var target_node=jsPlumb.getSelector("."+demo_bottom_code)[0]
                    //0-left 1-right 2-bottom 3-top
                    if(demo_bottom_ob==0){
                        instance.addEndpoint(target_node, {
                            uuid: target_node.getAttribute("id") + "-left",
                            anchor: "LeftMiddle",
                            maxConnections: -1
                        })
                        var overlays = [
                            [ "Arrow", { location: 0.7 }, arrowCommon ]
                            //[ "Arrow", { location: 0.3, direction: -1 }, arrowCommon ]
                        ];
                        if(demo_bottom_desc!=undefined&&demo_bottom_desc!=''){
                            if(demo_bottom_cla!=undefined&&demo_bottom_cla!=''){
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_bottom_desc,cssClass:demo_bottom_cla} ]
                                ];
                            }else {
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_bottom_desc} ]
                                ];
                            }
                        }
                        instance.connect({uuids: [windows[i].getAttribute("id") + "-bottom", target_node.getAttribute("id") + "-left"], overlays: overlays});
                    }
                    if(demo_bottom_ob==1){
                        instance.addEndpoint(target_node, {
                            uuid: target_node.getAttribute("id") + "-right",
                            anchor: "RightMiddle",
                            maxConnections: -1
                        })
                        var overlays = [
                            [ "Arrow", { location: 0.7 }, arrowCommon ]
                            //[ "Arrow", { location: 0.3, direction: -1 }, arrowCommon ]
                        ];
                        if(demo_bottom_desc!=undefined&&demo_bottom_desc!=''){
                            if(demo_bottom_cla!=undefined&&demo_bottom_cla!=''){
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_bottom_desc,cssClass:demo_bottom_cla} ]
                                ];
                            }else {
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_bottom_desc} ]
                                ];
                            }
                        }
                        instance.connect({uuids: [windows[i].getAttribute("id") + "-bottom", target_node.getAttribute("id") + "-right"], overlays: overlays});
                    }
                    if(demo_bottom_ob==2){
                        instance.addEndpoint(target_node, {
                            uuid: target_node.getAttribute("id") + "-bottom",
                            anchor: "BottomCenter",
                            maxConnections: -1
                        })
                        var overlays = [
                            [ "Arrow", { location: 0.7 }, arrowCommon ]
                        ];
                        if(demo_bottom_desc!=undefined&&demo_bottom_desc!=''){
                            if(demo_bottom_cla!=undefined&&demo_bottom_cla!=''){
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_bottom_desc,cssClass:demo_bottom_cla} ]
                                ];
                            }else {
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_bottom_desc} ]
                                ];
                            }
                        }
                        instance.connect({uuids: [windows[i].getAttribute("id") + "-bottom", target_node.getAttribute("id") + "-bottom"], overlays: overlays});
                    }
                    if(demo_bottom_ob==3){
                        instance.addEndpoint(target_node, {
                            uuid: target_node.getAttribute("id") + "-top",
                            anchor: "TopCenter",
                            maxConnections: -1
                        })
                        var overlays = [
                            [ "Arrow", { location: 0.7 }, arrowCommon ]
                        ];
                        if(demo_bottom_desc!=undefined&&demo_bottom_desc!=''){
                            if(demo_bottom_cla!=undefined&&demo_bottom_cla!=''){
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_bottom_desc,cssClass:demo_bottom_cla} ]
                                ];
                            }else {
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_bottom_desc} ]
                                ];
                            }
                        }
                        instance.connect({uuids: [windows[i].getAttribute("id") + "-bottom", target_node.getAttribute("id") + "-top"], overlays: overlays});
                    }
                }
            }

            if(demo_top_code!=undefined&&demo_top_code!=''){
                if(demo_top_ob!=undefined&&demo_top_ob!=''){
                    instance.addEndpoint(windows[i], {
                        uuid: windows[i].getAttribute("id") + "-top",
                        anchor: "TopCenter",
                        maxConnections: -1
                    })
                    var target_node=jsPlumb.getSelector("."+demo_top_code)[0]

                    //0-left 1-right 2-bottom 3-top
                    if(demo_top_ob==0){
                        instance.addEndpoint(target_node, {
                            uuid: target_node.getAttribute("id") + "-left",
                            anchor: "LeftMiddle",
                            maxConnections: -1
                        })
                        var overlays = [
                            [ "Arrow", { location: 0.7 }, arrowCommon ]
                        ];
                        if(demo_top_desc!=undefined&&demo_top_desc!=''){
                            if(demo_top_cla!=undefined&&demo_top_cla!=''){
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_top_desc,cssClass:demo_top_cla} ]
                                ];
                            }else {
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_top_desc} ]
                                ];
                            }
                        }
                        instance.connect({uuids: [windows[i].getAttribute("id") + "-top", target_node.getAttribute("id") + "-left"], overlays: overlays});
                    }
                    if(demo_top_ob==1){
                        instance.addEndpoint(target_node, {
                            uuid: target_node.getAttribute("id") + "-right",
                            anchor: "RightMiddle",
                            maxConnections: -1
                        })
                        var overlays = [
                            [ "Arrow", { location: 0.7 }, arrowCommon ]
                            //[ "Arrow", { location: 0.3, direction: -1 }, arrowCommon ]
                        ];
                        if(demo_top_desc!=undefined&&demo_top_desc!=''){
                            if(demo_top_cla!=undefined&&demo_top_cla!=''){
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_top_desc,cssClass:demo_top_cla} ]
                                ];
                            }else {
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_top_desc} ]
                                ];
                            }
                        }
                        instance.connect({uuids: [windows[i].getAttribute("id") + "-top", target_node.getAttribute("id") + "-right"], overlays: overlays});
                    }
                    if(demo_top_ob==2){
                        instance.addEndpoint(target_node, {
                            uuid: target_node.getAttribute("id") + "-bottom",
                            anchor: "BottomCenter",
                            maxConnections: -1
                        })
                        var overlays = [
                            [ "Arrow", { location: 0.7 }, arrowCommon ]
                        ];
                        if( demo_top_desc!=undefined&&demo_top_desc!=''){
                            if(demo_top_cla!=undefined&&demo_top_cla!=''){
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_top_desc,cssClass:demo_top_cla} ]
                                ];
                            }else {
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_top_desc} ]
                                ];
                            }
                        }
                        instance.connect({uuids: [windows[i].getAttribute("id") + "-top", target_node.getAttribute("id") + "-bottom"], overlays: overlays});
                    }
                    if(demo_top_ob==3){
                        instance.addEndpoint(target_node, {
                            uuid: target_node.getAttribute("id") + "-top",
                            anchor: "TopCenter",
                            maxConnections: -1
                        })
                        var overlays = [
                            [ "Arrow", { location: 0.7 }, arrowCommon ]
                        ];
                        if(demo_top_desc!=undefined&&demo_top_desc!=''){
                            if(demo_top_cla!=undefined&&demo_top_cla!=''){
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_top_desc,cssClass:demo_top_cla} ]
                                ];
                            }else {
                                overlays = [
                                    [ "Arrow", { location: 0.7 }, arrowCommon ],
                                    [ "Label", { label:demo_top_desc} ]
                                ];
                            }
                        }
                        instance.connect({uuids: [windows[i].getAttribute("id") + "-top", target_node.getAttribute("id") + "-top"], overlays: overlays});
                    }
                }
            }


        }


    });

    jsPlumb.fire("jsPlumbDemoLoaded", instance);
});

流程图效果展示

Created with Raphaël 2.2.0 开始 我的操作 确认？ 结束 yes no
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值