jQuery Drag + Drop with Pyramid + Ajax

Question

我已經使用redips.net表拖放表行創建了一些有效的jQuery代碼。

我已經在模板中完成了它的工作，但是現在，在“保存”上，我需要為我移動的數據生成一個JSON字符串，然后將其寫入我的數據庫（很容易），但是我需要幫助是如何從我的網頁中提取數據，然后將其保存到我的數據庫中。

我當前的模板是：

<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），因此，如果我嘗試這種錯誤方式或產生混亂的代碼，我深表歉意。

Answer 1

好吧，最簡單的方法是將表格移到form標記內，並向每行添加一個具有唯一ID的隱藏輸入：

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

然后，當您提交表單時（不需要JavaScript技巧），row_id將按照它們在表中的顯示順序發送。 在表單提交處理程序中，您將可以使用以下方法獲取這些值

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

（有關說明，請參見MultiDict ）。

這種方法不會將JSON發送到服務器，而只是將標准表單提交給服務器，但是它使您可以最小化對您不太熟悉的JavaScript / jQuery / AJAX的使用。