如何处理 django-ajax-select 管理面板中过多的元素？

Question

我正在使用

django-ajax-select

库在管理面板中显示多对多关系。问题是我链接了太多对象，导致页面超长。

你知道我是否可以自定义该元素，以便它可以有某种滚动条或分页吗？

这是说明问题的示例： 图片链接

这就是我将元素添加到管理面板的方式：

form = make_ajax_form(
    MainClass,
    {
        "users": "user", # LookupChannel is registered as user
        "admins": "user",
    },
)

Answer 1

此问题的一个简单解决方案是在模板加载后使用 JS 将可滚动 CSS 类附加到您的

django-ajax-select

表单字段。

为此，您应该首先在 Django 应用程序模板目录中创建自定义

change_form_template

。

如果您不熟悉，Django 文档 有更多相关信息。

然后您可以使用以下内容填充文件：

{% extends "admin/change_form.html" %}
{% block admin_change_form_document_ready %}
    {{ block.super }}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const resultsDiv = document.querySelector('#id_<your_field_name>_on_deck');
            resultsDiv.classList.add('scrollable');
        });
    </script>
{% endblock %}

<your_field_name>

应该是您在模型表单中定义的任何字段名称。

如果使用文档

快速使用

示例，这将是tags：

# yourapp/forms.py
class DocumentForm(ModelForm):

    class Meta:
        model = Document

    tags = AutoCompleteSelectMultipleField('tags')

所以你的

change_form_template

看起来像：

{% extends "admin/change_form.html" %}
{% block admin_change_form_document_ready %}
    {{ block.super }}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const resultsDiv = document.querySelector('#id_tags_on_deck');
            resultsDiv.classList.add('scrollable');
        });
    </script>
{% endblock %}

这将使列表可滚动，并有望解决您的用户体验问题。

注意：我提供的模板示例是将其集成到管理面板中，您很可能需要根据您计划使用它的位置对其进行调整。

Answer 2

答案位于 django-ajax-select 的第一页

https://django-ajax-selects.readthedocs.io/en/latest/

你应该像这样重写 get_query ：

def get_query(self, q, request):
        return super().get_query(q, request)[your_search_limit]

your_search_limit - 您想要获取的列表的长度。