我有一个自动生成 X 个表的应用程序,并根据它们的值为它们分配随机 id。然后,我有一个充当数据池的主表,在将数据放入新表之前将其存储在其中。
最终,一旦将数据存储在它的新表中,它将是可排序的,因此我可以更改表的层次结构。此外,它应该能够从其表中移出并移入任何其他表。我计划使用一个小按钮/图像在每个表中上下移动数据,但是从一个表移动到另一个表应该能够在单击该行时起作用。
我在网上看到的所有教程和代码片段都显示了在表之间移动数据,但是在您的 jquery 脚本中,您必须手动分配所有表类和 id。我不能这样做,因为它们对于从初始 SQL 查询返回的内容是可变的。
我当前的 html 模板看起来像这样(我知道它不会工作,但可拖放和可拖放只是为了向您展示我希望它如何工作)。这甚至可以使用 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>