假设我有一张表格
class SampleClass(forms.Form):
name = forms.CharField(max_length=30)
age = forms.IntegerField()
django_hacker = forms.BooleanField(required=False)
是否有一种方法为我定义css类在每个字段,这样我就可以使用jQuery基于类在我渲染的页面?
我希望不必手动构建表单。
假设我有一张表格
class SampleClass(forms.Form):
name = forms.CharField(max_length=30)
age = forms.IntegerField()
django_hacker = forms.BooleanField(required=False)
是否有一种方法为我定义css类在每个字段,这样我就可以使用jQuery基于类在我渲染的页面?
我希望不必手动构建表单。
当前回答
下面是上面的一个变种,它将给所有字段相同的类(例如jquery漂亮的圆角)。
# Simple way to assign css class to every field
def __init__(self, *args, **kwargs):
super(TranslatedPageForm, self).__init__(*args, **kwargs)
for myField in self.fields:
self.fields[myField].widget.attrs['class'] = 'ui-state-default ui-corner-all'
其他回答
下面是在类中声明字段后向小部件添加类定义的另一种解决方案。
def __init__(self, *args, **kwargs):
super(SampleClass, self).__init__(*args, **kwargs)
self.fields['name'].widget.attrs['class'] = 'my_class'
要在django中定义css类,只需在表单中使用小部件即可。
例子:
class ProcessForm(forms.ModelForm):
class Meta:
model = Processmachine
fields = ['machine_name', 'operation_no', 'process_uploadfile'] #https://docs.djangoproject.com/en/3.0/ref/forms/widgets/
widgets = { 'machine_name': forms.TextInput(attrs={ 'class': 'form-control' }),
'operation_no': forms.TextInput(attrs={ 'class': 'form-control' }),
'process_uploadfile': forms.ClearableFileInput(attrs={ 'class': 'form-control' }),
}
在上面的表单中,我在attrs中使用了css类
如果您希望表单中的所有字段都继承某个类,只需定义一个父类,从表单继承。ModelForm,然后继承它
class BaseForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(BaseForm, self).__init__(*args, **kwargs)
for field_name, field in self.fields.items():
field.widget.attrs['class'] = 'someClass'
class WhateverForm(BaseForm):
class Meta:
model = SomeModel
这帮助我自动将“form-control”类添加到应用程序的所有表单上的所有字段,而不需要添加代码复制。
如果您正在使用ModelForm,并且已经包含了带有fields属性的必要字段,那么有一种方法可以为它们定义css类。对我来说,这比“for循环”方法更好,因为我想为不同的输入字段使用不同类型的css类。
fields = ( 'date', 'title'),
widgets = {'date': forms.DateInput(attrs={'class': 'datepicker'}),
'title': forms.TextInput(attrs={'class': 'title'})}
或者您也可以尝试通过Form类的构造函数设置它们
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields['date'].widget.attrs.update({'class': 'datepicker'})
self.fields['title'].widget.attrs.update({'class':'title'})
只需将类添加到表单,如下所示。
class UserLoginForm(forms.Form):
username = forms.CharField(widget=forms.TextInput(
attrs={
'class':'form-control',
'placeholder':'Username'
}
))
password = forms.CharField(widget=forms.PasswordInput(
attrs={
'class':'form-control',
'placeholder':'Password'
}
))