1

X 個のテーブルを自動生成し、その値に応じてランダムな ID を割り当てるアプリケーションがあります。次に、データ プールとして機能する 1 つのメイン テーブルを用意します。データは、新しいテーブルにドロップされる前に格納されます。

最終的にデータが新しいテーブルに格納されると、順序付けが可能になるため、テーブルの階層を変更できます。また、テーブルから移動して他のテーブルに移動できる必要があります。小さなボタン/画像を使用して各テーブル内でデータを上下に移動する予定ですが、あるテーブルから別のテーブルへの移動は行をクリックするだけで機能するはずです。

私がオンラインで見たすべてのチュートリアルとコード スニペットは、テーブル間でデータを移動することを示していますが、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>
4

1 に答える 1

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 %}
于 2012-07-31T15:01:04.323 に答える