在django-crispy-forms中创建控件-行

Question

使用django-crispy-forms，我想在一行中组合两个(或更多)小部件。另请参阅附加的示例。我认为使用该库应该是可行的，尽管文档中确实包含了关于此问题的示例，并且源代码也没有帮助。那么，有没有人设法使用django-crispy-forms得到类似的结果呢？

​

​

这样的表单所需的HTML如下所示：

<div class="control-group">
    <label for="desc" class="control-label">
        Description
    </label>
    <div class="controls controls-row">
        <input class="span2" maxlength="255" type="text" id="desc">
        <input class="span3" maxlength="255" type="text">
    </div>
</div>

Answer 1

你可以在‘`def init(self，*args，**kwargs)：in layout object中定义HTML对象。这个HTML将为你提供所有你想要的自由。

还有另一种方法。要在templates文件夹中实际创建自己的模板，然后在layout对象中定义该模板的路径示例：

Field('name', template='path/to/template/single_line_input.html'),

其中'name‘实际上是一个小部件。

当然，你可以尝试在你的应用程序中使用CSS文件，像float: left或display: inline这样的东西可能会有帮助，但你必须在应该以内联方式显示的小部件上定义类。对于不擅长前端CSS的人来说，这可能有点棘手(因为结果在不同的浏览器和不同的分辨率上可能是不同的，所以不用说需要一些测试)。您遇到的问题主要是浏览器默认情况下将输入字段呈现为块对象，因此它们在一行中占据了所有空间，即使它们的宽度较小。

Answer 2

是。使用Layouts

下面是一个示例代码片段，可以帮助您进行操作。

def __init__(self, *args, **kwargs):
    self.helper = FormHelper()
    self.helper.form_method = 'get'
    self.helper.form_id = 'id_search'
    self.helper.layout = Layout(
            Div(
                Div(Field('arrival_date', css_class='span12 input-large calendar',
                    placeholder='dd/mm/yyyy'), css_class='span5'),
                Div(Field('departure_date', css_class='span12 input-large calendar',
                    placeholder='dd/mm/yyyy'), css_class='span5'),
                Div(Field('rooms', css_class='span12'), css_class='span2 styled-rooms'),
                css_class='row-fluid',
            ),
        )

Answer 3

您可以使用MultiValueField和MultiWidget来获得此行为。您将需要考虑并修改compress和decompress方法，但下面的内容应该可以帮助您实现这一目标。

from django import forms
from crispy_forms.helper import FormHelper

class MyWidget(forms.MultiWidget):
    widgets = (forms.TextInput(), forms.TextInput())
    super(ExpirationDateWidget, self).__init__(widgets)

    def decompress(self, value):
        if value:
            return value.split('|')  # or however you combined the two values
        return [None, None]


class MyMultiField(forms.MultiValueField):
    def __init__(self, *args, **kwargs):
        self.widget = MyWidget(*args, **kwargs)

    def compress(self, data_list):
        return data_list[0] + '|' + data_list[1]  # or other logical compression


class MyForm(forms.Form):
    multi_field = MyMultiField()
    # other fields like category and category_new

    def __init__(self, *args, **kwargs):
        self.helper = FormHelper()
        self.helper.form_class = 'form-horizontal'
        self.helper.layout = Layout('multi_field', 'category', 'category_new')

这将导致类似如下的结果：

 <div id="div_id_multi_field" class="control-group">
     <label for="id_multi_field_0" class="control-label">Multi Field</label>
     <div class="controls">
         <input id="id_multi_field_0">
         <input id="id_multi_field_1">
     </div>
 </div>