使用WTForms FieldList

Question

我通过Flask.WTF扩展使用带有Flask的WTForms.不过,这个问题不是Flask特有的.

WTForms包括FieldList字段列表的字段.我想用它来制作一个用户可以添加或删除项目的表单.这将需要某种Ajax框架来动态添加小部件,但WTForms文档没有提及它.

像Deform这样的其他框架也支持Ajax.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);
}

删除按钮会更棘手.

(代码主要是从使用Ajax动态添加表单到Django formset的答案中借用的.)