Строка JSPlumb Connect Tables
У меня есть 2 таблицы 5 строк данных в нем, и я хочу подключить каждую строку таблицы table_1 к table_2. Я могу соединить эти 2 таблицы, но невозможно соединить каждую строку таблицы table_1 и table_2.
код, показанный ниже:
<!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, Возраст -> Возраст2 и DOB ->DOB2. Возможно ли это в jsPlumb или же есть какой-нибудь плагин jquery/javascript для этой операции?
заранее спасибо
1 ответ
Если я не ошибаюсь, я думаю, что вы пытаетесь сделать узлы типа "класс" внутри узлов типа "узел". Кажется, что это невозможно.