6

使用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>
4

3 回答 3

7

是的。使用布局

这是一个示例片段，可以帮助您进行操作。

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',
            ),
        )
于 2013-02-20T15:23:12.710 回答
3

你可以在 `def init (self, *args, **kwargs): in layout object 中定义 HTML 对象。此 HTML 将为您提供满足您需求的所有自由。

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

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

其中“名称”实际上是一个小部件。

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

于 2013-02-20T14:54:42.683 回答
2

您可以使用MultiValueFieldandMultiWidget来获得这种行为。您需要考虑并修改compressanddecompress方法，但类似以下的内容应该可以帮助您实现部分目标。

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>
于 2013-03-02T18:49:50.347 回答