使用WTForms FieldList

我通過Flask.WTF擴展名使用帶有Flask的WTForms。不過，這個問題不是Flask特有的。使用WTForms FieldList

WTForms包括一個FieldList field for lists of fields。我想用它來製作一個表單，用戶可以添加或刪除項目。這將需要某種Ajax框架來動態添加小部件，但WTForms文檔沒有提及它。其他框架如Deform come with Ajax support。是否有類似的框架可用於WTForms？

來源

2011-05-14 Kiran Jonnalagadda

對不起，我沒有代碼，我可以輕鬆地共享 - 我使用了JavaScript是基於YUI 2.然而，核心的自定義框架的一部分操作使用'cloneNode'克隆持有行的容器的最後一行，然後遞歸地重命名其名稱與合適的正則表達式匹配的子元素。 –

我用這樣的事情與我的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); 
}

刪除按鈕會更棘手。

（代碼大多是從答案借來Dynamically adding a form to a Django formset with Ajax。）

來源

2011-12-06 06:08:39 Dave

從您的描述中，我看不出爲什麼Ajax是特別需要的，雖然當然您需要JavaScript邏輯來添加/刪除行。我已經使用WTForms實現了這個功能，但是沒有來自WTForms本身的特別支持;您只需確保在創建客戶端小部件時使用WTForms將正確解析到服務器端列表中的字段名稱執行此操作。您可以使用客戶端JavaScript克隆現有行以添加行，以便在生成的服務器端行和客戶端創建的行之間對行進行渲染是一致的。

來源

2011-05-16 04:50:53

錯誤，是的，這不需要Ajax，只是一個模板來重現。你有你可以分享的代碼嗎？ –

使用WTForms FieldList

回答

相關問題