在表格之间移动tr

问题描述：

我有一个应用程序自动生成X个表格，并根据它们的值为它们分配随机ID。然后，我有一个主表充当数据池，数据在被放入新表之前被存储。在表格之间移动tr

最终一旦数据被存储到它的新表中，它将是可订购的，所以我可以改变表的层次结构。它也应该能够被移出桌子并且移动到任何其他桌子上。我打算使用一个小按钮/图像在每个表格内上下移动数据，但是从一个表格移动到另一个表格应该能够在点击该行时起作用。

我在网上看到的所有教程和代码片段都显示了在表之间移动数据，但在您的jQuery脚本中，您必须手动分配所有表类和ID。我无法做到这一点，因为它们对于从初始SQL查询返回的内容是可变的。我现在的html模板看起来像这样（我知道它不会工作，但可拖动和droppable只是为了告诉你我是如何工作的）。这甚至有可能与jQuery，或者我应该看看另一条路线？

<script> 
$(function() { 
    $(".draggable").draggable(); 
    $(".droppable").droppable({ 
     drop: function(event, ui) { 
      $(this) 
       .addClass("ui-state-highlight") 
       .find("p") 
        .html("Dropped!"); 
     } 
    }); 
}); 
</script> 

{% for vehicle in vehicles %} <!-- List the vehicles available --> 
<h1>{{ vehicle.reg }} </h1> 
<table class="listing droppable" id="{{ vehicle.reg }}"> 
<tr> 
<th>Account #</th> 
<th>Customer</th> 
<th>Order #</th> 
<th>Order Weight</th> 
</tr> 
<!-- want items to be dropped as rows in here --> 
</table> 
<br /><br /> 
{% endfor %} 

<br /><br /> 
<h1>Unassigned Orders</h1> 
<table class="listing"> 
<tr> 
<th>Account #</th> 
<th>Customer</th> 
<th>Order #</th> 
<th>Order Weight</th> 
</tr> 
{% for order in orders %} 
<tr class="draggable"> <!-- rows should be able to get dropped into any vehicle table --> 
<td>{{ order.oh_custaccref }}</td> <!-- and then into any other table (if required) --> 
<td>{{ order.name }}</td> 
<td>{{ order.oh_orderno }}</td> 
<td>{{ order.oh_orderwgt }}</td> 
</tr> 

{% endfor %} 
</table>

答

我解决了这个与http://www.redips.net/javascript/drag-and-drop-table-content/

它是一个很酷的扩展，它可以让你移动单元格，和整个行内和表之间。

我的HTML模板最终成为：

<div id="drag"> 
{% for vehicle in vehicles %} <!-- List the vehicles available --> 
<table class="listing" id="{{ vehicle.reg }}"> 
<colgroup><col width="100"/><col width="120"/><col width="480"/><col width="100"/><col width="100"/></colgroup> 
<tr> 
<th class="mark">{{ vehicle.reg }}</th> 
</tr> 
<tr> 
<th class="mark"> </th>  
<th class="mark">Account #</th> 
<th class="mark">Customer</th> 
<th class="mark">Order #</th> 
<th class="mark">Order Weight</th> 
</tr> 
<tr> 
<td class="rowhandler"><div class="drag row"></div> </td> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
<!-- want items to be dropped as rows in here --> 
</table> 
{% endfor %} 

<table class="listing"> 
<colgroup><col width="100"/><col width="120"/><col width="480"/><col width="100"/><col width="100"/></colgroup> 
<tr> 
<th class="mark">NO REG</th> 
</tr> 
<tr> 
<th class="mark"> </th>  
<th class="mark">Account #</th> 
<th class="mark">Customer</th> 
<th class="mark">Order #</th> 
<th class="mark">Order Weight</th> 
</tr> 
{% for order in orders %} 
<tr> 
<!-- rows should be able to get dropped into any vehicle table --> 
<td class="rowhandler"><div class="drag row"></div> </td> 
<td>{{ order.oh_custaccref }}</td> <!-- and then into any other table (if required) --> 
<td>{{ order.name }}</td> 
<td>{{ order.oh_orderno }}</td> 
<td>{{ order.oh_orderwgt }}</td> 
</tr> 

{% endfor %}  
</table> 
</div> <!-- end drag --> 
{% endblock %}

在表格之间移动tr

相关推荐