引入css
<link rel="stylesheet" href="{% static 'plugin/bootstrap-select/css/bootstrap-select.min.css' %}">
引入js
<script src="{% static 'plugin/bootstrap-select/js/bootstrap-select.min.js' %}"></script>
<script src="{% static 'plugin/bootstrap-select/js/i18n/defaults-zh_CN.min.js' %}"></script>
后端modelform处理自定义标签
forms/issues.py
class IssuesModelForm(BootStrapModelForm, forms.ModelForm):
class Meta:
model = models.Issues
exclude = ['project', 'creator', 'create_datetime', 'latest_update_datetime']
widgets = {
# 给前端下拉框标签添加bootstrap-select属性,使其支持但多选,关键字搜索,全选/全不选功能
'assign': forms.Select(attrs={'class': 'selectpicker', 'data-live-search': 'true'}),
'attention': forms.SelectMultiple(attrs={'class': 'selectpicker', 'data-live-search': 'true', 'data-actions-box': 'true'}),
"parent": forms.Select(attrs={'class': "selectpicker", "data-live-search": "true"}),
"start_date": forms.DateTimeInput(attrs={'autocomplete': "off"}),
"end_date": forms.DateTimeInput(attrs={'autocomplete': "off"})
}
forms/bootstrap.py
class BootStrapModelForm(object):
bootstrap_exclude_list = [] # 自定制排除bootstrap样式列表
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
for name, field in self.fields.items():
if name in self.bootstrap_exclude_list:
continue
# 若自己的插件有自定制class属性,则使用旧属性,否则添加form-control属性
old_class = field.widget.attrs.get('class')
field.widget.attrs['class'] = '{} form-control'.format(old_class)
field.widget.attrs['placeholder'] = f'请输入{field.label}'
标签:bootstrap,forms,field,attrs,使用,true,class,select
From: https://www.cnblogs.com/fuminer/p/16856086.html