模板中的 django-filter 按钮答案

【问题标题】：django-filter button in template模板中的 django-filter 按钮
【发布时间】：2019-02-01 06:35:24
【问题描述】：

我正在使用 django-filter 包。我的页面显示所有书籍。我有5个流派。我希望有人能够单击“可怕”按钮，然后过滤我的书单（用户不必也单击“提交”，只需单击流派按钮）。

但是现在当我点击一个流派按钮时，它并没有过滤。除非我在我的 filters.py 中使用复选框小部件（已注释掉），否则选中该框，然后单击流派按钮，但这看起来很难看。

提前感谢您的帮助！

Filters.py

class BookFilter(django_filters.FilterSet):
    genre = django_filters.ModelMultipleChoiceFilter(queryset=Genre.objects.all(),
#widget=CheckboxSelectMultiple)
    class Meta:
        model = Book
        fields = ['genre']

book_list.html

<form method="get">
  <ul>
    {% for genre in filter.form.genre %}
    <li>
      <button type="submit" class="button">
        {{ genre }}
      </button>
    </li>
    {% endfor %}
  </ul>
</form>

更新感谢 GwynBleidD 的帮助！我还必须将 filter.form.genre 中的流派的 {%} 更改为流派列表中的流派的 {%}，在我看来，genre_list=Genre.objects.all()。否则，按钮值为 value=option value=10 而不是 value=10。

【问题讨论】：

标签： django django-filter

【解决方案1】：

您可以为按钮添加名称和值。这样，按钮在单击时也会在提交表单之前将指定名称的属性设置为指定值

<form method="get">
  <ul>
    {% for genre in filter.form.genre %}
    <li>
      <button type="submit" class="button" name="genre" value="{{ genre }}">
        {{ genre }}
      </button>
    </li>
    {% endfor %}
  </ul>
</form>

【讨论】：

感谢您的快速回复！现在按钮名称说：可怕的“>。当我点击可怕的“>时，网址变为 /books/?genre=
您的 HTML 中可能存在一些语法错误。检查并修复它。

【解决方案2】：

我尝试了@GwynBleidD 的方法，但遇到了与@tei1 相同的问题。似乎filter.form 的内容是生成的html，所以genre 是实际的选项html，如下所示：

<option value="">---------</option>

...这与 OP 想要的或我正在寻找的东西不太相符。

我能够通过在上下文中提供过滤值的数据以及过滤器来使其工作。我正在使用基于类的视图，看起来像这样：

    def get_context_data(self, *args, **kwargs):
        context = super().get_context_data(**kwargs)
        context['genres'] = Genre.objects.all()
        context['filter'] = BookFilter(self.request.GET, queryset=Books.objects.all())
        return context

以下模板，假设您要为过滤器显示的值在流派模型的name 属性中可用：

<form method="get">
  <ul>
    {% for genre in genres %}
    <li>
      <button type="submit" class="button" name="genre" value="{{ genre.id }}">
        {{ genre.name }}
      </button>
    </li>
    {% endfor %}
  </ul>
</form>

如果你想要一个没有应用过滤器的“全选”按钮：

<form method="get">
  <ul>
    <li>
      <button type="submit" class="button" name="genre" value="" selected>
        All Genres
      </button>
    </li>
    {% for genre in genres %}
    <li>
      <button type="submit" class="button" name="genre" value="{{ genre.id }}">
        {{ genre.name }}
      </button>
    </li>
    {% endfor %}
  </ul>
</form>

【讨论】：