jQueryでDjangoのformsetの表示を制御するjquery.formset.jsを試してみた
複数の同じフォームの表示をしたい場合、Djangoではformsetが用意されてます。
https://docs.djangoproject.com/en/1.4/topics/forms/formsets/
普通に使うと、複数のフォームが同時に表示されます。
「最初はフォームをひとつだけ表示し、必要に応じて増減させたい」という場合は、javascriptを使って表示非表示を制御したりしますが、
その部分を担ってくれるライブラリを見つけたので、どんな感じか試してみました。
django-dynamic-formset
http://code.google.com/p/django-dynamic-formset/
まずFormとFormsetを用意します
forms.py
from django.forms.formsets import formset_factory from django import forms class TweetForm(forms.Form): tweet = forms.CharField(widget=forms.Textarea, max_length=140) TweetFormSet = formset_factory(TweetForm, extra=1, max_num=100)
表示してみたいだけなので、view関数は簡単なものです
views.py
from django.shortcuts import render_to_response from forms import TweetFormSet def index(request): formset = TweetFormSet() return render_to_response('app/index.html', {'formset': formset })
テンプレートでformsetを描画します。jqueryとjquery.formset.jsを読み込みます
index.html
<!-- 抜粋 --> <form id="myForm" action="#"> {% for form in formset %} <div class="each_form"> {{ form.tweet }} </div> {% endfor %} {{ formset.management_form }} <div> <input type="submit" value="submit"/> </div> </form> <!-- 抜粋 --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="/path/to/jquery.formset.js"></script>
formsetの表示を制御するjs部分はこんな感じ
$(function() { $('#myForm div.each_form').formset({ prefix: '{{ formset.prefix }}', }); })
オプションは以下を渡せます
jqeury.formset.jsから抜粋
/* Setup plugin defaults */ $.fn.formset.defaults = { prefix: 'form', // The form prefix for your django formset addText: 'add another', // Text for the add link deleteText: 'remove', // Text for the delete link addCssClass: 'add-row', // CSS class applied to the add link deleteCssClass: 'delete-row', // CSS class applied to the delete link formCssClass: 'dynamic-form', // CSS class applied to each form in a formset added: null, // Function called each time a new form is added removed: null // Function called each time a form is deleted }
簡単に導入できるのがいいですね。
ただ細かい挙動まで要件で指定されそうな場合は、自前で実装しておいたほうがいいような気もします。
最新のバージョンは1.2ですが、追加される入力フォームのidがちょっとおかしかったり、フォームが0個になるまで削除できてしまったりしたので1.1を使いました。
とりあえず動くようになったのでherokuにアップしました
http://formset-sample.herokuapp.com/
githubにもおいた
https://github.com/yuhei0718/jquery-formset-sample