0

redips.net テーブルのドラッグ アンド ドロップ テーブル行を使用して、機能する jQuery コードをいくつか作成しました。

私はこれをテンプレートで必要に応じて機能させていますが、「保存」時に、移動したデータの JSON 文字列を生成し、それをデータベースに書き込む必要があります (十分に簡単です)。私のWebページからデータを抽出して、データベースに保存できるようにする方法です。

私の現在のテンプレートは次のとおりです。

<script type="text/javascript" src="/static/js/redips-drag-min.js"></script>
<div id="drag">
{% for vehicle in vehicles %} <!-- List the vehicles available -->
<table class="listing" id="{{ vehicle.id }}">
<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>
<div id="drag">
{% for vehicle in vehicles %} <!-- List the vehicles available -->
<table class="listing" id="{{ vehicle.id }}">
<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">Collections</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 -->

<form id="myform">
    <ol id="drop_list">
    </ol>
    <input id="save_button" type="button" value="Save" class="button" onclick="redips.save()" title="Save form"/>
</form>

したがって、私が助けを必要としているのは、これらのテーブルからデータを JSON 文字列に取得して、Pyramid で操作できるようにする方法です。これに直接役立つものを見つけることができませんでした。私は非常に基本的な JavaScript/jQuery の知識 (および AJAX) を持っているので、これを間違った方法で試みたり、乱雑なコードを生成したりした場合はお詫びします。

4

1 に答える 1

1

Well, the easiest would be to move your table inside the form tag and add a hidden input with a unique ID to each row:

<td>{{ order.oh_custaccref }} <input type="hidden" name="row_id" value="{{ order.oh_custaccref }}"</td>

then, when you submit the form (no JavaScript trickery required), the row_ids will be sent in the order they are present in your table. In your form submit handler, you'll be able to get those values using

row_ids = request.GET.getall('row_id')

(See MultiDict for explanations).

This approach does not send JSON to the server, just the normal form submit, but it allows you to minimize usage of JavaScript/jQuery/AJAX which you're not very familiar with.

于 2012-11-13T06:08:05.610 に答える