[英]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.