使用WTForms FieldList

Question

我在使用WTForms和Flask，借助Flask.WTF这个扩展。不过这个问题并不是特别针对Flask。

WTForms里面有一个叫做FieldList的字段，用来处理一系列的字段。我想用这个来做一个表单，让用户可以添加或删除项目。为了实现这个功能，需要用到某种Ajax框架来动态添加控件，但WTForms的文档里没有提到这方面的内容。

其他框架，比如Deform就支持Ajax。那么WTForms有没有类似的框架呢？

Answer 1

根据你的描述，我看不出为什么特别需要Ajax，不过当然你需要用JavaScript来添加或删除行。我用WTForms实现过这个功能，但WTForms本身并没有特别的支持；你只需要确保在创建客户端的控件时，使用WTForms能够正确解析的字段名称，这样服务器端的列表才能正常工作。你可以使用客户端的JavaScript来克隆现有的行，从而添加新行，这样无论是服务器生成的行还是客户端创建的行，它们的显示都是一致的。

Answer 2

我用类似这样的代码和我的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表单集的回答中借来的。）