6

django-crispy-formsを使用して、2 つ (またはそれ以上) のウィジェットを 1 つの行に結合したいと考えています。添付の例も参照してください。ドキュメントにはこの問題に関する例が含まれており、ソースコードも役に立ちませんでしたが、そのライブラリを使用して可能であると思います。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 に熟練していない人にとっては少し難しいかもしれません (ブラウザーや解像度によって結果が異なる可能性があるため、言うまでもなく、いくつかのテストが必要です)。あなたが抱えている問題は主に、ブラウザがデフォルトで入力フィールドをブロックオブジェクトとしてレンダリングしているため、幅が狭くても1行ですべてのスペースを占めるという事実です.

于 2013-02-20T14:54:42.683 に答える
2

とを使用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>
于 2013-03-02T18:49:50.347 に答える