Question

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

最终，一旦数据被存储到新表中，它将是可订购的，因此我可以更改表的层次结构。此外，它应该能够移出其表并进入任何其他表。我计划使用一个小按钮/图像在每个表内上下移动数据，但是从一个表移动到另一个表应该能够在单击该行时起作用。

我在网上看到的所有教程和代码片段都显示了在表之间移动数据，但是在你的jquery脚本中你必须手动分配所有的表类和id。这是我无法做到的，因为它们对于从初始SQL查询返回的内容是可变的。

我当前的html模板看起来像这样（我知道它不会工作，但是draggable和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>

Answer 1

我用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

1 个答案: