将多行从一个表拖放到另一个表 [英] Drag and drop multiple rows from one table to another table
问题描述
我需要通过从一个表中选择所需的行到另一个表来拖放表行.首先提供从一个表中选择所需行的选项，然后需要将所有选定的行拖放到其他表中.
我已经完成了将单行从一个表格拖放到另一个表格的示例.找到以下代码:
html:
<表格><头><tr><th>ID</th><th>ClassName</th></tr></thead><tr><td>1</td><td>第1类</td></tr><tr class="childrow"><td collspan = "2" ><table class="childgrid"><tr class="draggable_tr"><td>1</td><td>学生 1</td></tr><tr class="draggable_tr"><td>2</td><td>学生 2</td></tr><tr class="draggable_tr"><td>3</td><td>学生 3</td></tr><tr class="draggable_tr"><td>4</td><td>学生 4</td></tr><tr class="draggable_tr"><td>5</td><td>学生 5</td></tr></td></tr><tr><td>2</td><td>第2类</td></tr><tr class="childrow"><td collspan = "2"><table class="childgrid"><tr class="draggable_tr"><td>6</td><td>学生 6</td></tr><tr class="draggable_tr"><td>7</td><td>学生 7</td></tr><tr class="draggable_tr"><td>8</td><td>学生 8</td></tr><tr class="draggable_tr"><td>9</td><td>学生 9</td></tr><tr class="draggable_tr"><td>10</td><td>学生 10</td></tr></td></tr></tbody><div id="table2" class="bitacoratable"><表格><头><tr><th>ID</th><th>ClassName</th></tr></thead>
<tr><td>1</td><td>第1类</td></tr><tr class="childrow"><td><table class="childgrid"><tr class="draggable_tr"><td>1</td><td>学生 1</td></tr><tr class="draggable_tr"><td>2</td><td>学生 2</td></tr><tr class="draggable_tr"><td>3</td><td>学生 3</td></tr><tr class="draggable_tr"><td>4</td><td>学生 4</td></tr><tr class="draggable_tr"><td>5</td><td>学生 5</td></tr></td></tr><tr><td>2</td><td>第2类</td></tr><tr class="childrow"><td><table class="childgrid"><tr class="draggable_tr"><td>6</td><td>学生 6</td></tr><tr class="draggable_tr"><td>7</td><td>学生 7</td></tr><tr class="draggable_tr"><td>8</td><td>学生 8</td></tr><tr class="draggable_tr"><td>9</td><td>学生 9</td></tr><tr class="draggable_tr"><td>10</td><td>学生 10</td></tr></td></tr></tbody>脚本:
$("#table1 .childgrid tr, #table2 .childgrid tr").draggable({帮手:'克隆'，回复: '无效',开始:功能(事件，用户界面){$(this).css('opacity', '.5');},停止:功能(事件，用户界面){$(this).css('不透明度', '1');}});$("#table1 .childgrid, #table2 .childgrid").droppable({下降:功能(事件，用户界面){$(ui.draggable).appendTo(this);}});$(document).on("click", ".childgrid tr", function () {$(this).addClass("selectedRow");});
CSS:
表{边框折叠:折叠；}表, td, th{边框:1px纯黑色；}.bitacorable {高度:400px；溢出-y:自动；宽度:220px；向左飘浮;}#表格1 {右边距:100px；}.selectedRow {背景颜色:#E7E7E7；光标:移动；}
如何处理多行?
问候，卡西克.
解决方案 你可以使用 draggable 的辅助函数.这里有一个很好的实现.
以下是使用上述内容作为特定代码指南的外观:
对正在发生的事情的解释:
(1) 如果只选择了一个，那么我们就将其视为一次拖放.因为它还没有被点击(鼠标按住并立即拖动)，我们将手动添加 selectedRow 类以确保它从其原始位置正确删除.
(selected.length === 0) {selected = $(this).addClass('selectedRow');}
(2) 制作一个临时容器，将所有行存储为一个单元，就像我们在拖动一个项目一样.
var container = $('').attr('id', 'draggingContainer');container.append(selected.clone().removeClass("selectedRow"));返回容器；
(3) 您可以修改 CSS，以便我们始终在显示移动光标之前单击项目.我已经这样做了，但您可以随意更改它.
(4) 现在我们将临时分隔符中的所有表格行附加到我们选择放入的 .childgrid 中并删除所有最初选择的元素.
$("#table1 .childgrid, #table2 .childgrid").droppable({下降:功能(事件，用户界面){$(this).append(ui.helper.children());
$(this) 是我们选择的，我们在临时分隔符中附加了辅助函数返回的元素，即表格行.
$('.selectedRow').remove();}
现在删除我们之前选择的那些表格行.
});
如果有任何错误，请告诉我，我会尽力解决.它对我有用.由于您可以突出显示表格行中的文本，因此如果拖放速度过快并且突出显示文本而不是选择行本身，则可能会出现一些问题.
I need to drag and drop table rows by selecting desired rows from on table to another table. First provide option to select needed rows from one table and then all the selected rows need to be drag and drop into some other table.
I have done the sample to drag and drop single row from on table to another. Find the below code:
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>
Script:
$("#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;
}
How to do it for mutilple rows?
Regards,
Karthik.
解决方案 You could use draggable's helper function. There's a nice implementation here.
Here's how it looks using the above as a guideline for your particular code:
Explanation of what's going on:
(1) If there's only one selected, then we'll just treat this as a single drag and drop. Because it was not clicked yet (mouse holding down and dragging right away), we'll manually add the selectedRow class to ensure it gets properly removed from its original location.
(selected.length === 0) {
selected = $(this).addClass('selectedRow');
}
(2) Make a temporary container to store all the rows as one unit, as if we were dragging one item.
var container = $('<div/>').attr('id', 'draggingContainer');
container.append(selected.clone().removeClass("selectedRow"));
return container;
(3) You can modify the CSS so that we're always clicking on the items before it shows the move cursor. I already did, but feel free to change it as you like.
(4) Now we append all the table rows in our temporary divider into the .childgrid we chose to drop into and remove all elements that originally were selected.
$("#table1 .childgrid, #table2 .childgrid").droppable({
drop: function (event, ui) {
$(this).append(ui.helper.children());
$(this) is what we chose, and we're appending the elements inside our temporary divider that the helper returns, which are the table rows.
$('.selectedRow').remove();
}
Now to get rid of those table rows that we selected earlier.
});
Let me know if there are any bugs and I'll try my best to sort them out. It works on my end. Since you can highlight the text in the table rows, there could possibly be some issues if you drag and drop too fast and you're highlighting text rather than selecting the row itself.
这篇关于将多行从一个表拖放到另一个表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆