12

Flask.WTF 拡張機能を介して、Flask で WTForms を使用します。ただし、この質問は Flask 固有のものではありません。

WTForms には、FieldListフィールドのリスト用のフィールドが含まれています。これを使用して、ユーザーがアイテムを追加または削除できるフォームを作成したいと思います。これには、ウィジェットを動的に追加するためのある種の Ajax フレームワークが必要になりますが、WTForms のドキュメントではそれについて言及されていません。

Deformなどの他のフレームワークには、Ajax のサポートが付属しています。WTForms で利用できる同様のフレームワークはありますか?

4

2 に答える 2

7

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フォームセットにフォームを動的に追加するための回答から借用しています。）

于 2011-12-06T06:08:39.437 に答える
1

あなたの説明から、なぜAjaxが特に必要なのかわかりませんが、もちろん、行を追加/削除するにはJavaScriptロジックが必要です。WTForms を使用してこの機能を実装しましたが、WTForms 自体からの特別なサポートはありません。クライアント側のウィジェットを作成するときは、WTForms がサーバー側のリストに正しく解析するフィールド名を使用してこれを行う必要があるだけです。クライアント側の JavaScript を使用して既存の行を複製し、行を追加して、サーバー側で生成された行とクライアント側で作成された行の間で行のレンダリングが一貫するようにすることができます。

于 2011-05-16T04:50:53.903 に答える