更改 django-filter 表单的布局

Question

我目前正在开发我的第一个更大的 django 项目，我面临着有关使用 django-filters 制作的数据过滤器布局的问题。 django-filter 表单的默认布局是垂直列表（参见图片），但我需要将其设置为水平列表，由两行（标签/字段）组成。

编辑布局的（最佳实践）方法是什么？ 有没有办法可以从模板中访问表单的每个标签/字段项，以便我可以使用 Bootstrap5 网格？

一个限制是，我的模板将被不同的模型/过滤器使用，所以我需要动态配置布局。

非常感谢每一个提示:) 谢谢！

我的模板（相关部分）

<form method="get" class="form">
       <button type="submit" class ="btn btn-primary">Filtern</button>
       {% crispy filter.form %}
</form>

我的 django-filter 过滤器类

class EquipmentFilter(FilterSet):
    class Meta:
        model = Equipment
        fields = {'name': ['icontains'], 'description': ['icontains']}

我的模型

class Equipment(models.Model):
    """Device that can execute a measurement"""
    name = models.CharField("Name", max_length=50)
    description = models.CharField("Description", max_length=100)
    configuration = models.JSONField("Configuration", default=dict)
    equipment_category = models.ForeignKey("EquipmentCategory", on_delete=models.CASCADE, verbose_name="Equipment Category")

Answer 1

filter.form

是一个普通的Django表单，所以你可以按照你想要的方式布局它。

我看到你用的是脆皮形式。但你可以随心所欲地设计它，包括 boostrap-way。

这是来自官方文档

的示例

您可以使用

.as_p

方法以

<p><label><input></label></p>

格式获取它们，也可以手动生成它们：

<form method="get" class="form">
  <button type="submit" class ="btn btn-primary">Filtern</button>
  {{ filter.form.non_field_errors }}
  <div class="boostrap-class">
    {{ filter.form.name.errors }}
    <label for="{{ filter.form.name.id_for_label }}" class="another-boostrap-class">Name</label>
    {{ filter.form.name }}
  </div>
  <div class="boostrap-class">
    {{ filter.form.description.errors }}
    <label for="{{ filter.form.description.id_for_label }}" class="another-boostrap-class">Description</label>
    {{ filter.form.description }}
  </div>
</form>

您还可以在过滤器集元（

Form

）中指定自定义

EquipmentFilter.Meta

类，并使用另一个SO问题

中介绍的技术

Answer 2

我使用基于类的视图，我的解决方案是覆盖

get_context_data

并按摩那里的表单：

class EquipmentListView(
       SingleTableMixin,
       FilterView):

    model = Equipment
    table_class = EquipmentTable
    template_name = 'equipment/tables2/list.html'
    filterset_class = EquipmentFilter

    # override get_context_data
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        filter = context['filter']
        form = filter.form             # <- here!
        form.helper = FormHelper()
        form.helper.add_input(
            Submit('submit', 'Filter', css_class='btn-primary')
        )
        return context