2013-02-20 29 views
5

में नियंत्रण-पंक्ति बनाएं django-crispy-forms का उपयोग करके मैं एक पंक्ति पर दो (या अधिक) विजेट जोड़ना चाहता हूं। संलग्न उदाहरण भी देखें। मुझे लगता है कि यह पुस्तकालय का उपयोग करना संभव होना चाहिए, हालांकि दस्तावेज़ीकरण में इस मुद्दे पर उदाहरण शामिल हैं और स्रोत कोड या तो मदद नहीं करता है। तो क्या किसी ने django-crispy-forms का उपयोग कर समान परिणाम प्राप्त करने में कामयाब रहे हैं?django-crispy-forms

Example controls-row

एचटीएमएल इस तरह के एक फार्म के लिए आवश्यक इस तरह दिखता है:

<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> 

उत्तर

3

आप इसे `डीईएफ़ init (स्वयं, * args, ** kwargs में HTML वस्तु को परिभाषित करने के साथ कर सकता): लेआउट ऑब्जेक्ट में। यह एचटीएमएल आपको अपनी जरूरतों के लिए इच्छित स्वतंत्रता देगा।

एक और तरीका भी है। वास्तव में अपने टेम्पलेट्स फ़ोल्डर में में अपने स्वयं के टेम्पलेट बनाने के लिए और फिर अपने लेआउट वस्तु में उस टेम्पलेट उदाहरण के लिए पथ को परिभाषित:

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

कहाँ 'नाम' वास्तव में एक विजेट है।

बेशक आप हमेशा अपने अनुप्रयोग, float: left या display: inline की तरह कुछ मदद कर सकता है के लिए सीएसएस फ़ाइलों में चारों ओर खेलने के साथ यह करने के लिए कोशिश कर सकते हैं, लेकिन आप विगेट्स जो इनलाइन प्रदर्शित किया जाना चाहिए पर वर्गों को परिभाषित करना होगा। यह किसी ऐसे व्यक्ति के लिए थोड़ा मुश्किल हो सकता है जो फ्रंट सीएसएस में कुशल नहीं है (परिणामस्वरूप विभिन्न ब्राउज़रों और विभिन्न संकल्पों में विभिन्न हो सकते हैं, इसलिए कुछ परीक्षण की आवश्यकता नहीं है)। आपके पास समस्या मुख्य रूप से तथ्य यह है कि ब्राउज़र डिफ़ॉल्ट रूप से ब्लॉक ऑब्जेक्ट्स के रूप में इनपुट फ़ील्ड को प्रतिपादित कर रहे हैं, इसलिए वे एक पंक्ति में सभी जगह लेते हैं, भले ही उनकी चौड़ाई कम हो।

+0

धन्यवाद:

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') 

कुछ इस तरह का परिणाम देगा। मैंने आपके उत्तर को स्वीकार किए जाने के रूप में चिह्नित किया है हालांकि मैं कुछ ऑफ-द-बॉक्स की उम्मीद कर रहा था। 'फ़ील्ड (' नाम ', टेम्पलेट =' पथ/से/टेम्पलेट/एकल_लाइन_इनपुट.html ') के लिए – bouke

+0

+1, ' – suhailvs

7

हां। 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', 
      ), 
     ) 
+0

यह अभी भी सभी तीन फ़ील्ड के लिए लेबल प्रस्तुत करेगा, इसलिए मुझे अभी भी छिपाने के लिए सीएसएस फिक्स शामिल करना होगा उन तत्वों। किसी भी विचार को django-crispy-forms का उपयोग करके यह कैसे करना है? – bouke

+0

https://docs.djangoproject.com/en/dev/ref/forms/fields/#label बस 'लेबल =' '' – super9

+0

' सेट करें, अब मैं यहां पोस्ट किए गए उत्तरों के संयोजन का उपयोग कर रहा हूं। 'लेबल =' 'सेट करना अभी भी '

2

आप MultiValueField और MultiWidget का उपयोग इस व्यवहार प्राप्त करने के लिए कर सकते हैं। आपको compress और decompress विधियों के बारे में सोचने और संशोधित करने की आवश्यकता होगी, लेकिन निम्न की तरह कुछ आपको वहां भाग लेना चाहिए।

<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> 
+0

प्रतिक्रिया के लिए धन्यवाद। हालांकि यह दो क्षेत्रों को एकसाथ संयोजित करने के लिए बहुत सारे काम की तरह दिखता है। – bouke

+0

सहमत हैं, यह निश्चित रूप से बहुत सी कोड है। हालांकि, मैंने पाया कि यह मुझे अनुमानित एचटीएमएल दिया है कि मैं आसानी से सहायता पाठ और त्रुटि संदेशों को इस तरह से स्थिति में रख सकता हूं जो कि अन्य क्षेत्रों के अनुरूप था और विशेष हैक्स की आवश्यकता नहीं थी। अफसोस की बात है, दो फ़ील्ड "अपने जहर का चयन करें" परिदृश्य की तरह महसूस करते हैं ... – dfrdmn