將多個行從一個表拖放到另一個表
[英]Drag and drop multiple rows from one table to another table
問題描述
我需要通過從表格到另一個表格中選擇所需的行來拖放表格行。 首先提供從一個表中選擇所需行的選項，然后需要將所有選定的行拖放到其他表中。
我已經完成了將示例從表格拖放到另一個表格的示例。 找到以下代碼：
HTML：
<div id="table1" class="bitacoratable">
<table>
<thead>
<tr>
<th>ID</th>
<th>ClassName</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Class 1</td>
</tr>
<tr class="childrow">
<td collspan = "2" >
<table class="childgrid">
<tr class="draggable_tr">
<td>1</td>
<td>Student 1</td>
</tr>
<tr class="draggable_tr">
<td>2</td>
<td>Student 2</td>
</tr>
<tr class="draggable_tr">
<td>3</td>
<td>Student 3</td>
</tr>
<tr class="draggable_tr">
<td>4</td>
<td>Student 4</td>
</tr>
<tr class="draggable_tr">
<td>5</td>
<td>Student 5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>2</td>
<td>Class 2</td>
</tr>
<tr class="childrow">
<td collspan = "2">
<table class="childgrid">
<tr class="draggable_tr">
<td>6</td>
<td>Student 6</td>
</tr>
<tr class="draggable_tr">
<td>7</td>
<td>Student 7</td>
</tr>
<tr class="draggable_tr">
<td>8</td>
<td>Student 8</td>
</tr>
<tr class="draggable_tr">
<td>9</td>
<td>Student 9</td>
</tr>
<tr class="draggable_tr">
<td>10</td>
<td>Student 10</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="table2" class="bitacoratable">
<table>
<thead>
<tr>
<th>ID</th>
<th>ClassName</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Class 1</td>
</tr>
<tr class="childrow">
<td>
<table class="childgrid">
<tr class="draggable_tr">
<td>1</td>
<td>Student 1</td>
</tr>
<tr class="draggable_tr">
<td>2</td>
<td>Student 2</td>
</tr>
<tr class="draggable_tr">
<td>3</td>
<td>Student 3</td>
</tr>
<tr class="draggable_tr">
<td>4</td>
<td>Student 4</td>
</tr>
<tr class="draggable_tr">
<td>5</td>
<td>Student 5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>2</td>
<td>Class 2</td>
</tr>
<tr class="childrow">
<td>
<table class="childgrid">
<tr class="draggable_tr">
<td>6</td>
<td>Student 6</td>
</tr>
<tr class="draggable_tr">
<td>7</td>
<td>Student 7</td>
</tr>
<tr class="draggable_tr">
<td>8</td>
<td>Student 8</td>
</tr>
<tr class="draggable_tr">
<td>9</td>
<td>Student 9</td>
</tr>
<tr class="draggable_tr">
<td>10</td>
<td>Student 10</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
腳本：
$("#table1 .childgrid tr, #table2 .childgrid tr").draggable({
helper: 'clone',
revert: 'invalid',
start: function (event, ui) {
$(this).css('opacity', '.5');
},
stop: function (event, ui) {
$(this).css('opacity', '1');
}
});
$("#table1 .childgrid, #table2 .childgrid").droppable({
drop: function (event, ui) {
$(ui.draggable).appendTo(this);
}
});
$(document).on("click", ".childgrid tr", function () {
$(this).addClass("selectedRow");
});
CSS：
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
.bitacoratable {
height: 400px;
overflow-y: auto;
width: 220px;
float:left;
}
#table1 {
margin-right: 100px;
}
.selectedRow {
background-color: #E7E7E7;
cursor: move;
}
怎么做多行？
此致，Karthik。
1 個解決方案
解決方案1
8 2014-02-16 05:49:21
你可以使用draggable的幫助函數。 有一個很好的實現在這里 。
以下是使用上述內容作為特定代碼的指南：
解釋發生了什么：
（1）如果只選擇了一個，那么我們將把它視為單個拖放。 因為它還沒有被點擊（鼠標按住並立即拖動），我們將手動添加selectedRow類以確保它從原始位置正確刪除。
(selected.length === 0) {
selected = $(this).addClass('selectedRow');
}
（2）創建一個臨時容器，將所有行存儲為一個單元，就像我們拖動一個項目一樣。
var container = $('<div/>').attr('id', 'draggingContainer');
container.append(selected.clone().removeClass("selectedRow"));
return container;
（3）您可以修改CSS，以便我們在顯示移動光標之前始終單擊這些項目。 我已經做了，但隨意改變它你喜歡。
（4）現在我們將臨時分隔符中的所有表行追加到我們選擇放入並刪除最初選中的所有元素的.childgrid中。
$("#table1 .childgrid, #table2 .childgrid").droppable({
drop: function (event, ui) {
$(this).append(ui.helper.children());
$（this）是我們選擇的，我們將元素追加到輔助函數返回的臨時分隔符中，這些是表行。
$('.selectedRow').remove();
}
現在擺脫我們之前選擇的那些表行。
});
如果有任何錯誤，請告訴我，我會盡力排除它們。 它適用於我。 由於您可以突出顯示表格行中的文本，因此如果您拖放太快而且您突出顯示文本而不是選擇行本身，則可能會出現一些問題。
使用jQuery從html表中拖放多行 <thead> 標簽
[英]Drag and Drop multiple rows from html table using Jquery with <thead> tags
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.