Question

HI

我想水平对齐单选按钮。默认情况下，django表单以垂直格式显示。

feature_type  = forms.TypedChoiceField(choices = formfields.FeatureType, widget = forms.RadioSelect)

我们可以为单选按钮对齐传递任何特殊参数吗？

提前致谢

Answer 1

这是RadioField的行为。如果希望它水平渲染，请创建一个水平渲染器，如下所示：

from django.utils.safestring import mark_safe

class HorizontalRadioRenderer(forms.RadioSelect.renderer):
  def render(self):
    return mark_safe(u'\n'.join([u'%s\n' % w for w in self]))


class ApprovalForm(forms.Form):
    approval = forms.ChoiceField(choices=APPROVAL_CHOICES,
                 initial=0,
                 widget=forms.RadioSelect(renderer=HorizontalRadioRenderer),
                                 )

Answer 2

已修改的表单.RadioSelect：

"WebApp_ConnString": {
  "value": "Server=server01.corp.local;Database=TimeTracker;uid=sa;pass=IL0v3G0@tS3x;"
}

使用Django 1.10的标准管理员使用Python 3.4

和Django-Suit（http://djangosuit.com/）（它使用Bootstrap的2种风格）

尚未针对Django-grappelli进行测试。

Answer 3

在我的Django 2.2.6上，上述解决方案效果不佳，因此我经过多次尝试并跟随面包屑，直到使用了django表单小部件模板，才发布了我的解决方案。

我必须重写2个模板，并继承我自己的小部件类，然后将其指向。

修改后的默认django模板为：

django / forms / templates / django / forms / widgets / input_option.html
django / forms / templates / django / forms / widgets / multiple_input.html

现在它们是：

PROJECT_NAME / PROJECT_APP / templates / admin / horizontal_option.html

{% if widget.wrap_label %}<label{% if widget.attrs.id %} for="{{ widget.attrs.id }}"{% endif %} class="radio-inline">{% endif %}{% include "django/forms/widgets/input.html" %}{% if widget.wrap_label %} {{ widget.label }}</label>{% endif %}

PROJECT_NAME / PROJECT_APP / templates / admin / horizontal_radios.html

{% with id=widget.attrs.id %}<ul{% if id %} id="{{ id }}"{% endif %}{% if widget.attrs.class %} class="{{ widget.attrs.class }}"{% endif %}>{% for group, options, index in widget.optgroups %}{% if group %}
  <li>{{ group }}
    <ul{% if id %} id="{{ id }}_{{ index }}"{% endif %}>{% endif %}{% for option in options %}
    {% include option.template_name with widget=option %}{% endfor %}{% if group %}
  </ul></li>{% endif %}{% endfor %}
</ul>{% endwith %}

第一个在标签上包含一个硬编码的类：class="radio-inline"，默认情况下Django没有任何内容
第二个是广播集的呈现，我删除了它们在内部ul标签中呈现的多余HTML li标签。

然后您需要创建自己的小部件类：

from django.forms import RadioSelect


class HorizontalRadioSelect(RadioSelect):
    template_name = 'admin/horizontal_radios.html'
    option_template_name = 'admin/horizontal_inputs.html'

最后，以我为例，我指出了它在管理员中覆盖了formfield_overrides类属性。但是我认为您也可以在模型中做到这一点：

    formfield_overrides = {
        models.BooleanField: {'widget': HorizontalRadioSelect(choices=[(True, "Yes"), (False, "No"), (None, "Unknown")],)},
    }

Answer 4

我想出了一个替代解决方案。如果使用引导程序来呈现表单，则可以将.form-check-inline类添加到输入中，并且该字段将水平显示。下面列出的代码显示了我正在描述的内容。我希望这可以帮助某人重新发明轮子。谢谢阅读。保重，祝您愉快。

                feature_type = forms.MultipleChoiceField(
                required=False,
                ...
                widget=forms.CheckboxSelectMultiple(attrs={'class': 'form-check-inline'})
                )

Answer 5

根据the Django docs'attrs'是一个包含要在渲染小部件上设置的HTML属性的字典。

考虑到这一点，一个简单的基于表单的解决方案将类似于以下内容：

    1,1
    2,2
    3,3

Answer 6

另一种方法是将ul-> li列表的样式更改为display：inline-block。您可以做类似的事情

 <style>
 ul#youelementId li{
  display: inline-block;
  }
</style>

希望这对下一个读者有帮助。

Answer 7

实际上没有必要覆盖Widget，模板或admin中的其他任何内容。至少自2008年以来（请参阅forms.css），最简单的方法是传递类属性inline：attrs={'class': 'inline'}

在自定义表单中，它可能类似于：

field = forms.ChoiceField(choices=(('1', 'one'), ('2', 'two')),
                          widget=forms.RadioSelect(attrs={'class': 'inline'}))

…，并且对复选框的工作原理也是如此：

field = forms.MultipleChoiceField(choices=(('1', 'one'), ('2', 'two')),
                                  widget=forms.CheckboxSelectMultiple(attrs={'class': 'inline'}))

对于Formfield覆盖，应该通过ModelAdmin formfield_overrides或formfield_for_*函数来实现。

Answer 8

作为 renerer 为我提出这个错误：

<块引用>

AttributeError: type object 'RadioSelect' 没有属性 'renderer'

我想出了这个代码：

<form method="post">
    {% csrf_token %}
    {% for question in form %}
        <p>{{ question.label }}: </p>
        {% for choice in question %}
            {{ choice }}
        {% endfor %}
    {% endfor %}
    <br><br>
    <button type="submit">
            submit
    </button>

</form>

以django形式水平对齐单选按钮

8 个答案: