Question

我最近开始使用jsPlumb为客户端创建UI，但我遇到了两个我似乎无法解决的问题。

jsFiddle这里：http://jsfiddle.net/ugxopksz/

当我调整窗口大小时，第一个是我的端点和连接没有被重新绘制。这个网站正在进行一些响应式设计。我尝试了整个

$(window).resize(function(){
  jsPlumb.repaintEverything();
});

但那并不是废话。我没有收到任何错误，但它根本没有做任何事情。

我的第二个问题是我无法为一个连接指定多个源。类似的东西：

instance.connect({
        source:"oneT",
        target:"center",
        anchor:[[1, 0.5, 0, 0, 0, 80], [0, 0.5, 0, 0, 7, -40]]
});

除非我可以声明一些数组并创建一个循环，该循环将为数组中的每个元素生成该代码块。我正在寻找的原因是这个UI正在从数据库中提取并创建每个外部元素，因为它们可以改变我希望能够处理数据库更改发生时我不必去并手动添加新元素。

非常感谢任何帮助。

Answer 1

由于您使用单独的jsPlumb实例创建了连接，因此必须使用相同的实例重新绘制jsPlumb组件。更改以下行

jsPlumb.repaintEverything();

到

instance.repaintEverything();

Click here for updated jsFiddle link

Answer 2

第一个问题：

使用列表元素（li标签）不适合连接。相反，你可以制作div元素并尝试它。由于 li 标记没有正确的位置，因此窗口大小也无法重新绘制。从Doc's可以清楚地看到，具有绝对位置的元素在所有条件下都会表现正常。

看一下这个FIDDLE来连接DIV元素，还有调整大小窗口的重绘选项。

第二个问题：

现在jsPlumb不支持source参数的多个id，因此你没有其他选择，只能将它们循环到数组中：

var trg = 'center';
var src = ['oneT','twoT','threeT'];    

for(var i=0;i<src.length;i++)
{
    jsPlumb.connect({
                source: src[i],
                target: trg,
                connector: [ "Flowchart", {cornerRadius:1} ],
                paintStyle:{ lineWidth:5, strokeStyle:'#3E2522' },
                anchors: [[1.02, 0.5, 0, 1],
                    [-0.02, 0.5, 0, 0]],
                endpointStyle: { radius:0.5 }
    })
}

一些jsPlumb问题

2 个答案: