django中widget小部件

1. 處理 input 的部件

TextInput   

NumberInput

EmailInput

URLInput

PasswordInput

HiddenInput

DateInput

DateTimeInput

TimeInput

Textarea

 

2. Selector 和 checkbox 部件

CheckboxInput

Select

NullBooleanSelect

RadioSelect

CheckboxSelectMultiple

 

3. File upload 部件

FileInput

ClearableFileInput

 

4. 合成部件

MultipleHiddenInput

SplitDateTimeWidget

SplitHiddenDateTimeWidget

SelectDateWidget

 

所有內置的部件類都是繼承自Widget和MultiWidge ，可以繼承它們實現自己的部件功能

 

定制forms部件widget

　　Django 會把部件渲染成 HTML，這個渲染過程只會執行最小的工作量 -- 不會添加類名，或者其它具體的屬性。這意味着，例如，所有 TextInput 部件會在你所有的Web頁面上具有一樣的外觀。

　　有兩種辦法可以訂制部件：一是定制部件的實例對象（訂制 field 屬性）；二是繼承部件，定義內部類（訂制 css 和 js 文件的鏈接）。

 

1）定制部件的實例對象

       若想讓一個部件看起來和其它的不一樣，只需要在部件對象被指定給form域時在部件類里添加額外的屬性即可。在 Form 類里，對 field 指定widget，並傳遞一個參數 attrs，這個參數的類型是一個字典。

　　例如，有一個 Form 類：

from django import forms

class CommentForm(forms.Form):
    name = forms.CharField()
    url = forms.URLField()
    comment = forms.CharField()

　　此 form 包含三個默認的 TextInput 部件，默認沒有 CSS 類渲染，沒有額外的屬性。這意味着每個部件會具有同樣的外觀。

>>> f = CommentForm(auto_id=False)
>>> f.as_table()
<tr><th>Name:</th><td><input type="text" name="name" /></td></tr>
<tr><th>Url:</th><td><input type="url" name="url"/></td></tr>
<tr><th>Comment:</th><td><input type="text" name="comment" /></td></tr>

 　　在實際應用中，你可能會不想每個部件看起來一樣（讓comment有更大的輸入框或給name部件添加額外的CSS）。可以指定 ‘type’ 屬性來利用 HTML5的新HTML元素。想要實現這些，你只需要在創建部件時，使用 Widget.attrs  作為參數。

class CommentForm(forms.Form):
    name = forms.CharField(
                widget=forms.TextInput(attrs={'class':'special'}))
    url = forms.URLField()
    comment = forms.CharField(
               widget=forms.TextInput(attrs={'size':'40'}))

 　　其所渲染的 HTML 會包含額外的屬性：

>>> f = CommentForm(auto_id=False)
>>> f.as_table()
<tr><th>Name:</th><td><input type="text" name="name" class="special"/></td></tr>
<tr><th>Url:</th><td><input type="url" name="url"/></td></tr>
<tr><th>Comment:</th><td><input type="text" name="comment" size="40"/></td></tr>

 

2）繼承部件，定義內部類

     第二種方法：繼承部件類，或定義內部類 Media，或創建一個 media 屬性。

　　（1）定義內部類 Media

from django import forms

class CalendarWidget(forms.TextInput):
    class Media:
        css = {
            'all': ('pretty.css',)
        }
        js = ('animations.js', 'actions.js')

 這個部件會生成 link 和 script 代碼

>>> w = CalendarWidget()
>>> print(w.media)
<link href="http://static.example.com/pretty.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="http://static.example.com/animations.js"></script>
<script type="text/javascript" src="http://static.example.com/actions.js"></script>

　　（2）創建一個 Media 屬性

 

class CalendarWidget(forms.TextInput):
    def _media(self):
        return forms.Media(css={'all': ('pretty.css',)},
                           js=('animations.js', 'actions.js'))
    media = property(_media)