3

ユーザーが特定のフォルダーに含まれるすべての画像から画像を選択できるようにするアプリを作成したいと思います。ドロップダウン入力は、画像のサムネイルとファイル名をレンダリングします。選択値は画像のパスになります。

jQuery UI と javascriptでそれを行うことができることはわかっていますが、必要な視覚効果を得るためにフォームで動的に選択肢を生成する方法を知りたいです。

他にいい案があればよろしくお願いします

動的フォーム (不完全):

filename_list = ???
path_list = ???
images_thumbnails_list = ???

class imagesForm(forms.Form):
    def __init__(self, user, *args, **kwargs):
        super(imagesForm, self).__init__(*args, **kwargs)
        self.fields['selectedImage'] = forms.ChoiceField(choices=
                         for path in path_list: str(path),
                         for filename in filename_list: str(filename)
                         for thumbnail in images_thumbnails_list: thumbnail )

必要な入力フィールドの例:

  <select name="webmenu" id="webmenu">
    <option value="calendar" data-image="icons/icon_calendar.gif">Calendar</option>
    <option value="shopping_cart" data-image="icons/icon_cart.gif">Shopping Cart</option>
    <option value="cd" data-image="icons/icon_cd.gif">CD</option>
    <option value="email"  selected="selected" title="icons/icon_email.gif">Email</option>
    <option value="faq" data-image="icons/icon_faq.gif">FAQ</option>
    <option value="games" data-image="icons/icon_games.gif">Games</option>
  </select>

視覚的な例:

ここに画像の説明を入力

4

1 に答える 1

2

このタスクの良い解決策は、選択のモデルを作成することだと思います

class Countries(models.Model):
    name = models.CharField(length=255)
    thumbnail = models.ImageField(upload_to='static_directory')

フィクスチャを使用してそれらのデータを入力します

countries_list = Countries.objects.all()

class imagesForm(forms.Form):
    def __init__(self, user, *args, **kwargs):
        super(imagesForm, self).__init__(*args, **kwargs)
        self.fields['selectedImage'] = forms.ChoiceField(choices=countries_list)

このようにテンプレートでそれらをレンダリングします

{% for country in field.choices %}
    <option value="{{country.id}}"><img src="{{country.image.url}}"/> {{country.name}}</option>
{% endfor %}
于 2013-08-22T14:27:27.293 に答える