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

时间:2013-11-29 06:06:51

标签: javascript jquery drag-and-drop html-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 个答案:

答案 0 :(得分:8)

你可以使用draggable的帮助函数。有一个很好的实现here

以下是使用上述内容作为特定代码的指南:

JsFiddle Demonstration:

解释发生了什么:

(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();
    }

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

});

如果有任何错误,请告诉我,我会尽力排除它们。它适用于我。由于您可以突出显示表格行中的文本,因此如果拖放太快而且您突出显示文本而不是选择行本身,则可能会出现一些问题。