django中widget小部件

时间:2022-01-10 22:02:54
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)