更改django-filter表单的布局

Question

我目前正在从事我的第一个更大的django项目，我面临的问题是我的数据过滤器的布局与django-过滤器。django-filter表单的默认布局是一个垂直列表(参见图像)，但我需要将其设置为水平的，由两行(标签/字段)组成。

​

编辑布局的(最佳实践)方法是什么？有没有方法可以从模板中访问表单的每个标签/字段项，这样我就可以使用Bootstrap5网格了吗？

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

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

我的模板(相关部分)

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

我的django-过滤器类

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表单，所以您可以按照自己的意愿对它进行布局。

我看到你用的是脆的表格。但是你可以随意设计它，包括启动方式。

下面是来自正式文件的一个示例

您可以使用.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>

您还可以在您的filterset元(EquipmentFilter.Meta)中指定自定义的EquipmentFilter.Meta类，并使用另一个这样的问题中提供的技术。