django之ModelForm配合Select2之用法

django在开发时有很强大的功能，但是有一些功能还是不够的，django给我们强大的自增强功能。

Select2

https://select2.org

开发时可以直接使用CND：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

记住上的这些必须要放在html页面的头部，并且把jquery.js也放入头部。

ModelForm在渲染页面时优先使用系统默认的django-select2，在页面中显示如下：

class UserInfoModelForm(forms.ModelForm):

    class Meta:
        model = UserInfo
        fields = "__all__"
        exclude = None
        widgets = {
            "depart": wid.Select(attrs={'class': 'js-select form-control',"multiple":"multiple"}),
            "gender": wid.Select(attrs={'class': 'form-control'}),
            "create_time":wid.DateTimeInput(attrs={'class': 'form-control'})

        }

看看

 可以看出这样渲染出来的并不是我们想要的select2的样式。因此需要重写这个select的属性。

class UserInfoModelForm(forms.ModelForm):

    class Meta:
        model = UserInfo
        fields = "__all__"
        exclude = None
        widgets = {
            # "depart": wid.Select(attrs={'class': 'js-select form-control',"multiple":"multiple"}),
            "gender": wid.Select(attrs={'class': 'form-control'}),
            "create_time":wid.DateTimeInput(attrs={'class': 'form-control'})

        }

    def __init__(self, *args, **kwargs):
        super(UserInfoModelForm, self).__init__(*args, **kwargs)
        self.fields["depart"].widget.attrs.update({'class': 'js-select form-control',"multiple":"multiple"})

此时渲染出来的效果的就我们想要的select2的样式了，并且功能也很强大。

记住在最后要加入script:

    <script>
        {#$(".js-select").select2()#}
        $(document).ready(function () {
            $(".js-select").select2()
        });</script>