Question

生病尝试用户jsPlumb：基于MySQL的动态内容中的流程图。

我的代码基于流程图的演示示例：jQuery 我在我的数据库查询中生成我的端点

$plumb .= '_addEndpoints("drag'.$id_kurs.'", ["TopCenter", "BottomCenter", "LeftMiddle", "RightMiddle"]);

我将它添加到数据库内容末尾的我的内容

$vorschau .= '      </div>
                    </DIV>

                    <script>
                            jsPlumb.ready(function() {
                                    var instance = jsPlumb.getInstance({
                                        DragOptions : { cursor: "pointer", zIndex:2000 },

                                        ConnectionOverlays : [
                                            [ "Arrow", { location:1 } ],
                                            [ "Label", { 
                                                location:0.5,
                                                id:"label",
                                                cssClass:"aLabel"
                                            }]
                                        ],
                                    });

                                    var connectorPaintStyle = {
                                        lineWidth:2,
                                        strokeStyle:"#db0018",
                                        joinstyle:"round",
                                        outlineColor:"white",
                                        outlineWidth:1
                                    },
                                    // .. and this is the hover style. 
                                    connectorHoverStyle = {
                                        lineWidth:2,
                                        strokeStyle:"#000000",
                                        outlineWidth:1,
                                        outlineColor:"white"
                                    },
                                    endpointHoverStyle = {
                                        fillStyle:"#000000",
                                        strokeStyle:"#db0019"
                                    },
                                    sourceEndpoint = {
                                        endpoint:["Rectangle",{ width:18, height:18}],
                                        paintStyle:{ 
                                            fillStyle:"#db0013"
                                        },
                                        maxConnections:999,     
                                        isSource:true,
                                        isTarget:true,
                                        connector:[ "Flowchart", { stub:[40, 60], gap:10, cornerRadius:5, alwaysRespectStubs:true } ],                                              
                                        connectorStyle:connectorPaintStyle,
                                        hoverPaintStyle:endpointHoverStyle,
                                        connectorHoverStyle:connectorHoverStyle,
                                        dragOptions:{}        
                                    },      
                                    init = function(connection) {           
                                        connection.getOverlay("label").setLabel(connection.sourceId.substring(15) + "-" + connection.targetId.substring(15));
                                        connection.bind("editCompleted", function(o) {
                                            if (typeof console != "undefined")
                                                console.log("connection edited. path is now ", o.path);
                                        });
                                    };          

                                    var _addEndpoints = function(toId, sourceAnchors, targetAnchors) {
                                            for (var i = 0; i < sourceAnchors.length; i++) {
                                                var sourceUUID = toId + sourceAnchors[i];
                                                instance.addEndpoint("flowchart" + toId, sourceEndpoint, { anchor:sourceAnchors[i], uuid:sourceUUID });                     
                                            }
                                    };                                                      

                                    instance.doWhileSuspended(function() {


                                        '.$plumb.'

                                        instance.bind("connection", function(connInfo, originalEvent) { 
                                            init(connInfo.connection);
                                        });         

                                        instance.bind("click", function(conn, originalEvent) {
                                            if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
                                                jsPlumb.detach(conn); 
                                        }); 

                                        instance.bind("connectionDrag", function(connection) {
                                            console.log("connection " + connection.id + " is being dragged. suspendedElement is ", connection.suspendedElement, " of type ", connection.suspendedElementType);
                                        });     

                                        instance.bind("connectionDragStop", function(connection) {
                                            console.log("connection " + connection.id + " was dragged");
                                        });

                                        instance.bind("connectionMoved", function(params) {
                                            console.log("connection " + params.connection.id + " was moved");
                                        });
                                    });
                            });
                    </script>';

所有这些都在一个函数

中

HTML / CSS结构正确显示但它不会显示我的端点。
我已经包含了所有需要的js / css文件，正如我所说，我使用DEMO作为我的代码的基础。

我的错误讯息：

TypeError：el为null
... fsetTop，op =（relativeToRoot ||（container！= null＆amp;＆amp; el.offsetParent！= conta ...

dom-adapter中的行与错误有关：

var l = el.offsetLeft，t = el.offsetTop，op =（relativeToRoot ||（container！= null＆amp;＆amp; el.offsetParent！= container））？ el.offsetParent：null;

Answer 1

有问题的代码仅包含功能＆amp;变量定义，没有实际创建端点/连接的执行。

如jsPlumb演示的源代码中所示：https://jsplumbtoolkit.com/demo/home/demo.js

缺少连接电话。

var connection1 = instance.connect({
        source:"window1", 
        target:"window2",               
        connector:["Bezier", { curviness:70 }],
        cssClass:"c1",
        endpoint:"Blank",
        endpointClass:"c1Endpoint",                                                    
...});

缺少这些调用，这些调用在演示中用于创建连接＆amp;渲染相应的端点。

Answer 2

发现我的错误：

$plumb .= '_addEndpoints("drag'.$id_kurs.'"...

定义我的端点

对象具有相同的ID

<div class="dragable" id="drag'.$id_kurs.'">

但必须是：

<div class="dragable" id="flowchartdrag'.$id_kurs.'">

找到它只是运气，因为我没有想到这部分的错误

将jsPlumb与动态内容结合使用

2 个答案: