bootstrap-select的使用

bootstrap-select插件压缩包

引入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}'