使用 WTForms 字段列表答案

【问题标题】：Working with WTForms FieldList使用 WTForms 字段列表
【发布时间】：2011-08-25 10:17:22
【问题描述】：

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

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

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

【问题讨论】：

抱歉，我没有可以轻松共享的代码 - 我使用的 JavaScript 是基于 YUI 2 的自定义框架的一部分。但是，核心操作克隆了容器的最后一行行，使用cloneNode，然后递归地重命名其名称与合适的正则表达式匹配的子元素。

标签： python ajax forms flask wtforms

【解决方案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的回答中借来的。）

【讨论】：

【解决方案2】：

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

【讨论】：

呃，是的，这不需要 Ajax，只需一个模板即可复制。你有可以分享的代码吗？