使用具有自定义 bootstrap 样式的 Django 模板放置 <select> 字段

Question

我在将 html css javascript 前端与 django 连接时遇到问题。我有 html 个模板，它们的外观和工作方式也完全符合我的要求。我可以毫无问题地显示数据我使用以下方法调用属于我当前视图一部分的 django 字段：

<a>{{ thing.attribute }}</a>

效果很好。

我的问题是尝试将表单连接到我创建的 django 视图以使用 POST 操作更新和创建记录。例如，当使用 mdbootstrap 主题模板时，我实现了一个 html <select> 对象，如下所示：

<select type="select" class="mdb-select" id="fieldOne">
    <option value="0">Something</option>
    <option value="1">Something</option>
    <option value="2">Something</option>
</select>

这很有效，看起来也和我想要的一模一样，因为它正确地利用了正确的 css 和 javascript。

当我想放置一个 django 表单对象来代替同一个字段时，我必须这样调用它：

<div class="mdb-select">{{ thing.attribute }}</div>

我必须在 django 中将其称为 <div>，它破坏了我的 css 和 javascript，因此无法正确显示且无法使用。当我在开发工具中查看呈现的 html 时，我可以看到返回的数据，所以我知道我的 django 视图和表单正在工作。

有什么方法可以调用 django 对象，同时仍然使用我的 html 模板中的 <select> 标签？

Answer 1

1) 如果您使用的是模型表单，请执行以下操作：使用 django widget_tweaks，然后在您的模板中执行此操作：

{% load widget_tweaks %}

<label>{{my_form.field.label}}</label>
{% render_field my_form.field class="mdb-select" name="field" %}

或

class NewSomethingForm(ModelForm):
class Meta:
    model = Account
    fields = ['name', 'last_name', 'description']

def __init__(self, *args, **kwargs):
    self.fields['description'].widget = forms.Textarea(attrs={'class': 'md-textarea', 'style': 'height: 75px'})`enter code here`

2) 如果您不使用模型表单，那么在您的模板中，试试这个：

<select type="select" class="mdb-select" id="fieldOne" name=field>
    <option value="my_form.field_name.field.choices.0">my_form.field_name.field.choices.1</option>
    <!–– follow same sequence -- >
</select>

不要忘记为下拉元素指定一个与表单上的字段相匹配的名称。

Answer 2

您可以使用 Django ModelChoiceField 呈现 select 字段。当您使用 {{yourForm.select_field_name}} 在模板中使用此表单时，它将呈现为

编号：id_select_field_name
name:select_field_name

你需要关联的css类都包含在attrs中

from django import forms
class yourForm(forms.Form):
    select_field_name=forms.ModelChoiceField(queryset=recieptDetail.objects.all(), widget = forms.Select(attrs = {'class':"class-name",'onchange' : "jsFunction();"}))

使用具有自定义 bootstrap 样式的 Django 模板放置 <select> 字段

Placing a <select> field using Django templates with custom bootstrap styles

html

django

django-templates

bootstrap-4

mdbootstrap