Django select 2 多选加载慢

标签 django jquery-select2

我是一个初学者,我一直在尝试 select2.js 的多重选择选项。在历史学校数据库中,我们有超过 30 万个 Student_id。我可以使用 select2 选项,但它非常慢并且需要很长时间才能加载。我见过其他带有 select 2 的页面加载大量数据并且工作正常。

我正在使用以下 JavaScript 来加载 select2。

$(document).ready(function () {
    $('.js-example-basic-multiple').select2();
  });

在 Django 中,我使用以下方式加载模板中的数据:

  <script src= "{% static '/search/user_select2.js' %}" type="text/javascript"></script>

             <div class="col"><h4 style="margin-top: 0"><strong>Student ID List</strong></h4><select data-placeholder="Choose a list of 3-4 User ids..." class="js-example-basic-multiple"  value = "{{ userid }}" style="width: 1110px" required>
             {% for user in userid %}
             <option value="{{ user }}"> {{ user }}</option>
             {% endfor %}
           </select>

在我看来,userid 是使用以下参数定义的:

def multisearch(request):
    userid = STudent.objects.filter(student_status_id = 1).values('studentid')
    print(userid)

    args = {'userid':userid}

    return render(request, 'multisearch.html',args)

最佳答案

加载需要很长时间,因为您预加载了 select2 输入的所有选项。我建议您使用 select2 through django-autocomplete-light以避免这个问题。它将为您提供设置自动完成系统并在 select2 输入上键入文本时加载匹配选项的工具。此外,结果会分页,以便在您滚动 select2 下拉列表时加载它们。

基本上,您将有一个自动完成 View :

from dal import autocomplete

from your_app.models import Student


class Status1StudentsAutocomplete(autocomplete.Select2QuerySetView):
    def get_queryset(self):
        qs = Student.objects.filter(student_status_id=1)
        if self.q:  # self.q is the user-typed query
            qs = qs.filter(name__istartswith=self.q)
        return qs

当然,需要路由:

from your_app.views import Status1StudentsAutocomplete

urlpatterns = [
    url(
        r'^autocomplete/students/status-1/$',
        Status1StudentsAutocomplete.as_view(),
        name='students_status1_autocomplete',
    ),
]

然后为您的字段使用自动完成小部件:

from dal import autocomplete

from django import forms


class SomeForm(forms.Form):
    student = forms.ModelChoiceField(
        queryset=Student.objects.filter(student_status_id=1),
        widget=autocomplete.ModelSelect2(url='student_status1_autocomplete')
    )

最后,像平常一样显示您的表单,并且不要忘记使用 {{ form.media }} 包含自定义 css/js。

{% extend "your_layout.html" %}
{% block extrahead %} {# assuming extrahead block is within the <head> element #}
    {{ block.super }}
    {{ form.media }}
{% endblock %}

{% block content %} {# assuming you have a content block within your <body> element #}
    <form method="POST">
        {% csrf_token %}
        {{ form }}
        <button type="submit">Go!</button>
    </form>
{% endblock %}

关于Django select 2 多选加载慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49323497/

相关文章:

javascript - select2 MaximumSelectionSize 删除元素后不起作用

python - 如何编写Django模型以从多个表中获取记录?

python - 在 Django 中通过 REST API 登录

Django更新,没有必填字段

javascript - 如何发送带有正文的 Select2 AJAX POST?

html - 如何右对齐<select>中<option>中的部分文本

jquery - 引导选择2 : ability to select group

php - 当你有 php 函数时,用 ajax post 更新 select2

python - 如何将django中的url值传递给 View

python - 使用 REST Framework Django 进行身份验证