[英]Working with WTForms FieldList
我通過Flask.WTF擴展使用帶有Flask的WTForms。 不過,這個問題不是Flask特有的。
WTForms包括字段列表的FieldList
字段 。 我想用它來制作一個用戶可以添加或刪除項目的表單。 這將需要某種Ajax框架來動態添加小部件,但WTForms文檔沒有提及它。
我在FieldList / FormField中使用了類似的東西來添加更多條目:
$(document).ready(function () {
$('#add_another_button').click(function () {
clone_field_list('fieldset:last');
});
});
function clone_field_list(selector) {
var new_element = $(selector).clone(true);
var elem_id = new_element.find(':input')[0].id;
var elem_num = parseInt(elem_id.replace(/.*-(\d{1,4})-.*/m, '$1')) + 1;
new_element.find(':input').each(function() {
var id = $(this).attr('id').replace('-' + (elem_num - 1) + '-', '-' + elem_num + '-');
$(this).attr({'name': id, 'id': id}).val('').removeAttr('checked');
});
new_element.find('label').each(function() {
var new_for = $(this).attr('for').replace('-' + (elem_num - 1) + '-', '-' + elem_num + '-');
$(this).attr('for', new_for);
});
$(selector).after(new_element);
}
刪除按鈕會更棘手。
(代碼主要是從使用Ajax動態添加表單到Django formset的答案中借用的。)
從您的描述中,我看不出為什么特別需要Ajax,當然您確實需要JavaScript邏輯來添加/刪除行。 我已經使用WTForms實現了這個功能,但沒有來自WTForms本身的特殊支持; 您只需要確保在創建客戶端小部件時,使用WTForms將正確解析到服務器端列表中的字段名稱來執行此操作。 您可以使用客戶端JavaScript克隆現有行以添加行,以便在服務器端生成的行和客戶端創建的行之間呈現行的一致性。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.