在表格之間移動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>

來源

2012-07-30 Crooksey

我解決了這個與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 %}

來源

2012-07-31 15:01:04 Crooksey

在表格之間移動tr

回答

相關問題