使用带有自定义引导样式的 Django 模板放置 <select> 字段

Posted 2023-02-24

【中文标题】使用带有自定义引导样式的 Django 模板放置 <select> 字段

【英文标题】：Placing a <select> field using Django templates with custom bootstrap styles

【发布时间】：2019-02-28 11:29:11

【问题描述】：

我在将我的 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> 标记？

【问题讨论】：

你在使用 django 表单对吗？

是的，我正在使用 django 表单。

这些是模型形式还是常规形式？

它们在forms.py、view.py中定义，模型在models.py中定义。 html是一个模板。我对 django 还是很陌生，所以我对术语的理解有点不可靠。我在 MDN 上遵循了这个例子：developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Forms

我的大多数 html 字段都有同样的问题，因为 MDBootstrap 需要特定的 才能正常工作（例如 、 等）。

【参考方案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>

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

【讨论】：

widget_tweaks 完美地完成了这项工作。谢谢！

【参考方案2】：

您可以使用 Django ModelChoiceField 呈现选择字段。当您使用 yourForm.select_field_name 在模板中使用此表单时，它将像使用

一样呈现

id:id_select_field_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();"))