为django admin搜索search_fields添加搜索框提示文字

原创
08/12 13:25
阅读数 79

如上图所示django admin在ModelAdmin中添加search_fields即可显示一个搜索框,但是不能设置搜索框的提示文字,在实际开发中要让使用的人知道输入什么可以进行快速检索,是一个快速提升用户体验的方法,在网上找了很多,也没有很好的解决这个问题,今天我们就动手实现一个!


我这里已经通过下方命令创建了一个名为dadmin的app

python manage.py startapp dadmin

在dadmin目录下新建一个templatetags的文件夹,并且在其内部创建一个search_with_placeholder.py的文件,内部代码如下:

# dadmin/templatetags/search_with_placeholder.py
from django.contrib.admin.templatetags.admin_list import (register, search_form)from django.contrib.admin.templatetags.base import InclusionAdminNode

def search_form_plus(cl, search_placeholder: str = ""): """ Display a search form for searching the list with placeholder. """ return dict(search_form(cl), search_placeholder=search_placeholder)

@register.tag(name='search_form_plus')def search_form_tag(parser, token): return InclusionAdminNode( parser, token, func=search_form_plus,         template_name='search_form_plus.html', takes_context=False)

在与项目同级别,也就是根目录,创建一个templates的目录,再在其内部创建一个admin文件夹,重写admin的任何默认模板只需要放到这个文件夹即可,这也是修改django admin默认模板最简便的方法,我们在其内部创建一个search_form_plus.html的文件,内部代码如下:
{% load i18n static %}{% if cl.search_fields %}<div id="toolbar"><form id="changelist-search" method="get"><div><!-- DIV needed for valid HTML --><label for="searchbar"><img src="{% static "admin/img/search.svg" %}" alt="Search"></label><input type="text" size="40" name="{{ search_var }}" value="{{ cl.query }}" placeholder="{{ search_placeholder }}" id="searchbar" autofocus><input type="submit" value="{% translate 'Search' %}">{% if show_result_count %}    <span class="small quiet">{% blocktranslate count counter=cl.result_count %}{{ counter }} result{% plural %}{{ counter }} results{% endblocktranslate %} (<a href="?{% if cl.is_popup %}_popup=1{% endif %}">{% if cl.show_full_result_count %}{% blocktranslate with full_result_count=cl.full_result_count %}{{ full_result_count }} total{% endblocktranslate %}{% else %}{% translate "Show all" %}{% endif %}</a>)</span>{% endif %}{% for pair in cl.params.items %}    {% if pair.0 != search_var %}<input type="hidden" name="{{ pair.0 }}" value="{{ pair.1 }}">{% endif %}{% endfor %}</div></form></div>{% endif %}

再在dadmin目录下创建一个templates/dadmin的文件夹路径,再在其内部创建一个change_list.html的文件,内部代码如下:

<!-- 完整文件路径,这是注释,模板中可以删掉dadmin/templates/dadmin/change_list.html -->
{% extends 'admin/change_list.html' %}{% load search_with_placeholder %}{% block search %}{% search_form_plus cl search_placeholder %}{% endblock %}

之后在dadmin目录中的admin.py中定义一个所有ModelAdmin的基础类BaseAdmin,以后所有用到ModelAdmin的地方我们都继承BaseAdmin即可,代码如下:

class BaseAdmin(admin.ModelAdmin):  change_list_template = "dadmin/change_list.html"    def changelist_view(self, request, extra_context=None):        # 列表视图, 添加search_placeholder = ""        # 即可定义搜索框的值,也可以向列表页得传进任何数据        search_placeholder = getattr(self, "search_placeholder", False)        if search_placeholder:            extra_context = extra_context or {}            extra_context["search_placeholder"] = search_placeholder        return super().changelist_view(request, extra_context=extra_context)

使用也非常简单,所有的ModelAdmin都只需要继承他即可,如下例所示:

class CategoryModelAdmin(BaseAdmin):    """    分类管理配置    """
list_display = ('id', 'name', 'is_show', 'cate_icon', 'sort', 'add_date', 'operate') search_fields = ('name',) # 设置搜索框 search_placeholder = '请输入分类名称搜索' # 设置搜索框的提示文字
admin.site.register(CategoryModel, CategoryModelAdmin)

其他列表页也需要设置搜索框文字,继承BaseAdmin即可,非常简单,直接拿去使用吧!


相关源代码请参考:https://gitee.com/xingfugz/django-mall


如果你也在学习django,那么欢迎私信小编一起交流学习,欢迎star以上项目,给个鼓励,也欢迎您能关注我的公众号“幸福关中”,一起学习交流!

本文分享自微信公众号 - 轻编程(Qbiancheng)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部