使用WTForms FieldList

Question

我通过Flask.WTF扩展将WTForms与Flask一起使用。不过，这个问题并不是特定于Flask的。

WTForms包含一个FieldList field for lists of fields。我想用它来制作一个表单，用户可以在其中添加或删除项目。这将需要某种Ajax框架来动态添加小部件，但是WTForms文档没有提到这一点。

其他框架，如Deform come with Ajax support。是否有类似的框架可用于WTForms？

Answer 1

我在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的answer中借用。)

Answer 2

从您的描述中，我不明白为什么特别需要Ajax，当然，您确实需要JavaScript逻辑来添加/删除行。我已经使用WTForms实现了这个功能，但是没有WTForms本身的特殊支持；您只需要确保在创建客户端小部件时，使用WTForms将正确解析到服务器端列表中的字段名来完成此操作。您可以使用客户端JavaScript克隆现有行来添加行，以便在服务器端生成的行和客户端创建的行之间呈现一致的行。