在 django 中自定义单选按钮
Posted
技术标签:
【中文标题】在 django 中自定义单选按钮【英文标题】：customize radio buttons in django 【发布时间】：2013-05-22 08:01:01 【问题描述】：模板代码是
form.incident_live
forms.py
INCIDENT_LIVE = (
('0', 'Live'),
('1', 'Test'),
)
class IncidentForm(forms.ModelForm):
incident_live = forms.ChoiceField(widget=forms.Radioselect(),choices=INCIDENT_LIVE)
上面的代码给了我垂直顺序选择的单选按钮，但我希望它是水平的，即等效的 html 将是<input type="radio" name="status" />Live <input type="radio" name="status" checked="checked"/> Test。
提前致谢
【问题讨论】：
Align radio buttons horizontally in django forms 的可能重复项 【参考方案1】：听起来像是自定义小部件渲染器的工作：
from django.utils.safestring import mark_safe
class HorizRadioRenderer(forms.RadioSelect.renderer):
""" this overrides widget method to put radio buttons horizontally
instead of vertically.
"""
def render(self):
"""Outputs radios"""
return mark_safe(u'\n'.join([u'%s\n' % w for w in self]))
class IncidentForm(forms.ModelForm):
incident_live = forms.ChoiceField(widget=forms.RadioSelect(renderer=HorizRadioRenderer),choices=INCIDENT_LIVE)
取自https://wikis.utexas.edu/display/~bm6432/Django-Modifying+RadioSelect+Widget+to+have+horizontal+buttons
【讨论】：
刚刚没有测试，得到这个错误“Caught NameError while rendering: global name 'mark_safe' is not defined” 哦，好的，添加了import语句，试试看。 是的，它工作正常，我接受了你的回答。还有一个问题是可以减少两个选项之间的空间，因为两个选项之间的空间超过 2 英寸，需要减少最低限度。 突然意识到这个问题已经在这里问过了——标记为重复。如果你这样尝试：mark_safe(u'\n'.join([u'%s\n' % w.strip() for w in self]))？【参考方案2】：
“alecxe”的这种解决方案实际上对我不起作用。 但是添加 CSS 代码确实有效：
% block style %
<style>
.radio
display:inline-block;
</style>
% endblock %【讨论】：
很好，这很好用（虽然我必须做#key-pic li display: inline;，其中key-pic 是包含列表的div-id。）不知道为什么人们使用更复杂的版本。【参考方案3】：
根据 Django 文档，'attrs' 是一个字典，其中包含要在呈现的小部件上设置的 HTML 属性。
考虑到这一点，一个简单的基于表单的解决方案将类似于以下内容：
class IncidentForm(forms.ModelForm):
incident_live = forms.ChoiceField(
widget=forms.RadioSelect(attrs=
'display': 'inline-block',
),
choices=INCIDENT_LIVE
)
【讨论】：
【参考方案4】：<head>
<style>
#try li
display:inline-block;
</style>
<head>
<body>
<form id="try" class="form-horizontal" role="form" action="" method="post" enctype="multipart/form-data">
% csrf_token %
form.as_p
<button type="submit" class="btn btn-
success">Submit</button>
</form>
</body>
【讨论】：
请评论你的答案。【参考方案5】：实际上，解决方案应该非常简单。这一切都在 Django documentation 中。
这是我在一些表格中所做的：
在布局表单字段的模板中，我将这样做：
% for field in form.visible_fields %
field.errors
% if field.name == "<some_field_name>" %
...
...
% elif field.name == "<radio_field_name>" %
% for radio in field %
<label for=" radio.id_for_label ">
radio.choice_label
<span class="radio"> radio.tag </span>
</label>
% endfor %
% endif %
% endfor %
结果单选：
到目前为止，这已经奏效了。
【讨论】：
【参考方案6】：在user12379095 的启发下，我想出了这个让收音机与 Bootstrap 一起工作的方法。供我这种对HTML和CSS一窍不通的人参考。这是使用 Boostrap 5、Django 3.1.6：
在 forms.py 中：
from django import forms
class ExampleForm(forms.Form):
choice = forms.ChoiceField(
label = 'test',
choices = zip([1,2,3], ['a','b','c']),
widget = forms.RadioSelect(
attrs = 'class' : 'form-check-input'
)
)
在 html 模板中：
% for field in form.visible_fields %
field.errors
% for radio in field %
<div class="form-check form-check-inline">
radio
</div>
% endfor %
% endfor %
【讨论】：
以上是关于在 django 中自定义单选按钮的主要内容，如果未能解决你的问题，请参考以下文章