将多个行从一个表拖放到另一个表

本文介绍了将多个行从一个表拖放到另一个表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我需要通过从表上选择所需的行到另一个表来拖放表行。首先提供从一个表中选择所需行的选项，然后所有选定的行都需要拖放到其他表中。

我已经做了样本拖动将单行从表中删除到另一个。找到以下代码：

html：

< div id =table1class =bitacoratable> < table> < thead> < tr> < th> ID< / 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>学生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> < / 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>学生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> < / table> < / td> < / tr> < / tbody> < / table> < / div> < div id =table2class =bitacoratable> < table> < thead> < tr> < th> ID< / 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>学生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> < / 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>学生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> < / table> < / td> < / tr> < / tbody> < / table> < / div>

脚本：

code> $（＃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：

code> table { border-collapse：collapse; } 表，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; }

如何处理多个行？

Regards， Karthik。

解决方案

您可以使用draggable的帮助函数。 这里 实现了一个很好的实现。

以下是使用上述作为特定代码的指南的方式：

JsFiddle演示：

发生什么情况的说明：

（1）如果只有一个选择，那么我们将其视为一次拖放。因为没有点击（鼠标按住并立即拖动），我们将手动添加selectedRow类，以确保从原始位置正确删除。

（selected.length === 0）{ selected = $（this）.addClass（'selectedRow'）; }

（2）创建一个临时容器将所有行存储为一个单元，好像我们拖动一个项目。

var container = $（'< div />'） id'，'draggingContainer'）; container.append（selected.clone（）。removeClass（selectedRow））; 返回容器;

（3）您可以修改CSS，以便我们始终点击项目，然后再显示移动光标。我已经做了，但是随意改变它。

（4）现在我们将临时分隔符中的所有表行附加到我们选择的.childgrid中删除所有最初选择的元素。

$（＃table1 .childgrid，＃table2 .childgrid）。 droppable（{ drop：function（event，ui）{ $（this）.append（ui.helper.children（））;

$（这）是我们选择的，我们将附加的元素放在帮助器返回的临时分隔符中，这些表是行。

$（'。selectedRow'）。remove（）; } pre>

现在摆脱我们之前选择的表行。

}）;

让我知道如果有任何错误，我会尽力解决问题。它在我的尽头。由于您可以突出显示表格行中的文本，因此如果拖放速度太快，您可能会出现一些问题，而您突出显示文本，而不是选择行。

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:

JsFiddle Demonstration:

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.