Question

我正在尝试将多个行从一个表拖放到另一个表。请帮助我如何实现这一目标。请找到以下小提琴链接（我从论坛中获取），

$(document).ready(function () {
    var $tabs = $('#table-draggable2')
    $("tbody.connectedSortable")
        .sortable({
            connectWith: ".connectedSortable",
            items: "> tr:not(:first)",
            appendTo: $tabs,
            helper: "clone",
            zIndex: 999990
        })
        .disableSelection();
    var $tab_items = $(".nav-tabs > li", $tabs).droppable({
        accept: ".connectedSortable tr",
        hoverClass: "ui-state-hover",
        drop: function (event, ui) {
            return false;
        }
    });
});

http://jsfiddle.net/balajipalamadai/t06m8ghb/

感谢，巴拉吉

Answer 1

我自己找到了，我只是修改了这个小提琴的html http://jsfiddle.net/yf47u/以使其正常工作。我提到了post

请找到以下工作小提琴链接，

http://jsfiddle.net/balajipalamadai/83k9k/47/

<div id="table1" class="bitacoratable">
   <table id="table1" 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>
</div>
<div id="table2" class="bitacoratable">
   <table id="table2" 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>
</div>

感谢，巴拉吉

Answer 2

在本文中，我将通过一个示例说明如何使用jQuery使用拖放方法对表行进行排序（重新排序）。将使用jQuery UI Sortable Plugin通过拖放方法对HTML Table行进行排序（重新排序）。

HTML标记 HTML标记包含一个HTML表，该表将使用jQuery UI Sortable Plugin进行排序（重新排序）。

<table id="tblLocations" cellpadding="0" cellspacing="0" border="1">
<tr>
    <th>ID </th>
    <th>Location</th>
    <th>Preference</th>
</tr>
<tr>
    <td>1</td>
    <td> Goa</td>
    <td>1</td>
</tr>
<tr>
    <td>2</td>
    <td>Mahabaleshwar</td>
    <td>2</td>
</tr>
<tr>
    <td>3</td>
    <td>Kerala</td>
    <td>3</td>
</tr>
<tr>
    <td>4</td>
    <td>Kashmir</td>
    <td>4</td>
</tr>
<tr>
    <td>5</td>
    <td>Ooty</td>
    <td>5</td>
</tr>
<tr>
    <td>6</td>
    <td>Simla</td>
    <td>6</td>
</tr>
<tr>
    <td>7</td>
    <td>Manali</td>
    <td>7</td>
</tr>
<tr>
    <td>8</td>
    <td>Darjeeling</td>
    <td>8</td>
</tr>
<tr>
    <td>9</td>
    <td>Nanital</td>
    <td>9</td>
</tr>

应用jQuery UI可排序插件

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript">$(function () {
$("#tblLocations").sortable({
    items: 'tr:not(tr:first-child)',
    cursor: 'pointer',
    axis: 'y',
    dropOnEmpty: false,
    start: function (e, ui) {
        ui.item.addClass("selected");
    },
    stop: function (e, ui) {
        ui.item.removeClass("selected");
        $(this).find("tr").each(function (index) {
            if (index > 0) {
                $(this).find("td").eq(2).html(index);
            }
        });
    }
});});</script>

CSS类 以下CSS类已应用于HTML表格的行和单元格。

<style type="text/css">
table th, table td
{
    width: 100px;
    padding: 5px;
    border: 1px solid #ccc;
}
.selected
{
    background-color: #666;
    color: #fff;
}</style>

屏幕截图

Answer 3

    <table id="draggable" class="ui-sortable ui-droppable">
        <thead>
            <tr>
                <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
        </thead>
        <tbody>
            <tr class="ui-draggable ui-draggable-handle ui-sortable-handle ui-draggable-dragging">
                <td>1</td>
                <td>Name A</td>
                <td>Name AA</td>
            </tr>
            <tr class="ui-draggable ui-draggable-handle ui-sortable-handle  ui-draggable-dragging">
                <td>2</td>
                <td>Name B</td>
                <td>Name BB</td>
            </tr>
            <tr class="ui-draggable ui-draggable-handle ui-sortable-handle">
                <td>3</td>
                <td>Name C</td>
                <td>Name CC</td>
            </tr>
            <tr class="ui-draggable ui-draggable-handle ui-sortable-handle">
                <td>4</td>
                <td>Name D</td>
                <td>Name DD</td>
            </tr>
            <tr class="ui-draggable ui-draggable-handle ui-sortable-handle">
                <td>5</td>
                <td>Name E</td>
                <td>Name EE</td>
            </tr>
            <tr class="ui-draggable ui-draggable-handle ui-sortable-handle">
                <td>6</td>
                <td>Name F</td>
                <td>Name FF</td>
            </tr>
            <tr class="ui-draggable ui-draggable-handle ui-sortable-handle">
                <td>7</td>
                <td>Name G</td>
                <td>Name GG</td>
            </tr>
            <tr class="ui-draggable ui-draggable-handle ui-sortable-handle">
                <td>8</td>
                <td>Name H</td>
                <td>Name HH</td>
            </tr>
        </tbody>
    </table>


    <table id="droppable" style="margin-top: 39px;" class="ui-sortable ui-droppable">
        <thead>
            <tr>
                <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
        </thead>
        <tbody>
            <tr class="ui-draggable ui-draggable-handle ui-sortable-handle ui-draggable-dragging">
                <td>11</td>
                <td>Name A1</td>
                <td>Name AA1</td>
            </tr>
        </tbody>
    </table>
</div>

<div class="demo1">
    <p>Available Boxes (click to select multiple boxes)</p>
    <ul id="draggable1" style="background: #6b695d;">
        <li>
            <input type="checkbox" name="vehicle" value="Bike"> I have a Pen for Box #1</li>
        <li>
            <input type="checkbox" name="vehicle" value="Bike"> I have a Copy For Box #2</li>
        <li>
            <input type="checkbox" name="vehicle" value="Bike"> I have a Bag for Box #3</li>
        <li>
            <input type="checkbox" name="vehicle" value="Bike"> I have a Office for Box #4</li>
    </ul>
    <p>My Boxes</p>
    <ul id="droppable1" style="background: #907474;">
    </ul>
</div>

Answer 4

以下是选择多行进行拖放的示例代码

Jquery用于实现它，jquery数据表脚本主要是jquery.dataTables.min.js和jquery-ui.min.js。

可以在此处找到包含演示的整篇文章Drag and drop multiple rows using jquery in html table

这也显示了内置分页和搜索的用法，希望这有帮助

<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<link href="~/Scripts/jquery.dataTables.min.css" rel="stylesheet" />
<link href="~/Scripts/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {

        $("#tblEmployee tbody").sortable({
            start: function (e, ui) {
                var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
                ui.item.data('items', elements);
            },
            update: function (e, ui) {
                ui.item.after(ui.item.data("items"));
            },
            stop: function (e, ui) {
                ui.item.siblings('.selected').removeClass('hidden');
                $('tr.selected').removeClass('selected');
            }
        });

        $("#tblEmployee").dataTable({
            "pagingType": "simple"
        });

    });
</script> 

<table id="tblEmployee" class="table"> 
    <thead> 
        <tr> 
            <th> 
                ID
            </th> 
            <th> 
                Name
            </th>      
        </tr> 
    </thead> 
    <tbody> 
            <tr><td>1</td><td>Andy</td></tr>
            <tr><td>2</td><td>Mike</td></tr> 
            <tr><td>3</td><td>Lance</td></tr>
            <tr><td>4</td><td>Henry</td></tr> 
            <tr><td>5</td><td>Steve</td></tr>
            <tr><td>6</td><td>Mark</td></tr> 
    </tbody> 
</table>

使用Jquery从html表中拖放多行

5 个答案: