JSPlumb连接表行
问题描述:
我有2个表中的5行数据,我想连接table_1的每一行到table_2。 我可以连接这两个表,但不可能将table_1的每一行连接到table_2。JSPlumb连接表行
的代码如下所示:
<!doctype html>
<html>
<head>
<title>Example</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jsplumb.org/js/1.3.1/jquery.jsPlumb-1.3.1-all-min.js"></script>
</head>
<body >
<div id="block1" class ="node" style="position: absolute;">
<table id="table_1" style="border:2px solid #000;float:left;margin-right:9%;" >
<tr>
<th>Drag Line 1<hr />
</th>
</tr>
<div class ="class"><tr>
<!--<td><input type="checkbox" value="checkbox"></td -->
<td style="font-size: 12px; font-weight: normal; family-font: Arial; color: red;">Name </td>
</tr></div>
<tr>
<!--<td><input type="checkbox" value="checkbox"></td-->
<td style="font-size: 12px; font-weight: normal; font-family: Arial; color: red;">Age </td>
</tr>
<tr>
<!--<td><input type="checkbox" value="checkbox"></td -->
<td style="font-size: 12px; font-weight: normal; font-family: Arial; color: red;">DOB </td>
</tr>
</table>
</div>
<div id="block2" class ="node" style="position: absolute;">
<table id="table_2" style="border:2px solid #000;float:left;margin-right:9%;" >
<tr>
<th>Drag Line 2<hr />
</th>
</tr>
<tr>
<!--<td><input type="checkbox" value="checkbox"></td -->
<td style="font-size: 12px; font-weight: normal; family-font: Arial; color: red;">Name2 </td>
</tr>
<tr>
<!--<td><input type="checkbox" value="checkbox"></td -->
<td style="font-size: 12px; font-weight: normal; font-family: Arial; color: red;">Age2 </td>
</tr>
<div class ="class"><tr>
<!--<td><input type="checkbox" value="checkbox"></td -->
<td style="font-size: 12px; font-weight: normal; font-family: Arial; color: red;">DOB2 </td>
</tr></div>
</table>
</div>
<script type="text/javascript">
var rowCount = $('#table_1 tr').length;
var sourceColor = "#000000";
var sourceOption =
{
anchor:"RightMiddle",
isSource:true,
isTarget:false,
endpoint:["Rectangle",{width:10, height:10}],
paintStyle:{fillStyle:"#66FF00"},
maxConnections:-1
}
var targetOption =
{
anchor:"LeftMiddle",
endpoint:["Dot", {radius:3}],
paintStyle:{fillStyle:"#FFEF00"},
paintStyle:{ fillStyle:sourceColor},
isSource:false,
isTarget:true,
maxConnections:-1
}
jsPlumb.bind("ready", function() {
jsPlumb.addEndpoint($('.node'), sourceOption);
jsPlumb.addEndpoint($('.node'), targetOption);
jsPlumb.draggable($('.node'));
});
</script>
</body>
</html>
在上述例子中,我想连接名称--->名称2,年龄 - > AGE2岁和DOB - > DOB2。 是否有可能在jsPlumb或者是否有任何jquery/javascript插件来执行此操作?
在此先感谢
答
如果我没有错,我认为你正试图使类型的节点“类”类型“节点”的内部节点。这似乎是不可能的。
你到目前为止做了什么!!!你确定你不想要一些PHP .. 这是不够的information.Be更精细,并提出你的问题在正确的格式!!!一些编辑 –
我有做到这一点,而不是在PHP中。直到现在我已经创建了2个表格,并且我使用jsplumb插件使用addEndPoint()连接了这两个表格。现在我希望table_1中的每一行必须连接到另一个表table_2的每一行。例如,考虑table_1有3行,table_2也有3行。 – user2447666
通过编辑问题发布你的代码!!!人们如何才能知道你的代码中究竟发生了什么。如果你对stackoverflow不熟悉,那么花一些时间在meta stackOverflow上,并理解如何提出问题。你将会明确地获得更多回应! –