django - 在 Django 管理的更改列表页面中将过滤器部分从右侧栏移动到左侧栏

Question

我正在开发 Django。在 Django 管理中，我想将更改列表中过滤器部分的方向从右侧栏更改为左侧栏，如图所示:

admin.py 文件是:

from django.contrib import admin
from django.contrib.auth.admin import UserAdmin


from .models import CustomUser


class CustomUserAdmin(UserAdmin):

    change_form_template = 'change_form.html'

    add_form_template='add_form.html'

    list_display = ('first_name','last_name','email','is_staff', 'is_active',)
    list_filter = ('first_name','email', 'is_staff', 'is_active',)

    search_fields = ('email','first_name','last_name','a1','a2','city','state','pincode')
    ordering = ('first_name',)

    add_fieldsets = (
        ('Personal Information', {
            # To create a section with name 'Personal Information' with mentioned fields
            'description': "",
            'classes': ('wide',),  # To make char fields and text fields of a specific size
            'fields': (('first_name','last_name'),'email','a1','a2','city','state','pincode','check',
                       'password1', 'password2',)}
        ),
        ('Permissions',{
            'description': "",
            'classes': ('wide', 'collapse'),
            'fields':( 'is_staff', 'is_active','date_joined')}),
    )

有什么办法可以让过滤器部分像我提到的那样移动吗？

提前致谢!!

Answer 1

要做到这一点，您需要做的是将以下行添加到您的 admin.py 文件中:

change_list_template='change_list_form.html'

所以你的 admin.py 文件将如下所示:

from django.contrib import admin
from django.contrib.auth.admin import UserAdmin


from .models import CustomUser


class CustomUserAdmin(UserAdmin):

    change_list_template='change_list_form.html'

    change_form_template = 'change_form.html'

    add_form_template='add_form.html'

    list_display = ('first_name','last_name','email','is_staff', 'is_active',)
    list_filter = ('first_name','email', 'is_staff', 'is_active',)

    search_fields = ('email','first_name','last_name','a1','a2','city','state','pincode')
    ordering = ('first_name',)

    add_fieldsets = (
        ('Personal Information', {
            # To create a section with name 'Personal Information' with mentioned fields
            'description': "",
            'classes': ('wide',),  # To make char fields and text fields of a specific size
            'fields': (('first_name','last_name'),'email','a1','a2','city','state','pincode','check',
                       'password1', 'password2',)}
        ),
        ('Permissions',{
            'description': "",
            'classes': ('wide', 'collapse'),
            'fields':( 'is_staff', 'is_active','date_joined')}),
    )

之后，转到模板文件夹并按名称创建一个新的 html 文件:change_list_form.html

然后在change_list_form.html中添加以下代码:

{% extends "admin/change_list.html" %}
{% load i18n admin_urls static admin_list %}

{% block content_title %}<h1>Choose a User to Change or Add a new one</h1>{% endblock %}



<!- 944px -->

{% block filters %}
        {% if cl.has_filters %}
<style>@media only screen and (min-width: 1300px) {
.PG1{position:absolute;left:18%;}}</style>
    <div class="PG1 " style="">
          <div id="changelist-filter" style="" class="">
            <h2 style="font-style:italic">Try Filter </h2>
            {% if cl.preserved_filters %}<h3 id="changelist-filter-clear">
              <a href="?{% if cl.is_popup %}_popup=1{% endif %}">&#10006; {% trans "Clear all filters" %}</a>
            </h3>{% endif %}
            {% for spec in cl.filter_specs %}{% admin_list_filter cl spec %}{% endfor %}
          </div>
    </div>
        {% endif %}

      {% endblock %}



{% block search %}
<style>
@media only screen and (min-width: 1300px) {
.PG2{position:absolute;left:20%;top: 5%;width:1016px;}}</style><div style="" class="PG2">{% search_form cl %}</div>{% endblock %}


<form style="" id="changelist-form" method="post"{% if cl.formset and cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate>{% csrf_token %}
    {% if cl.formset %}<div>{{ cl.formset.management_form }}</div>{% endif %}

{% block result_list %}
    <style>
@media only screen and (min-width: 1300px) {
.PG3{position:absolute;left:20%;top:20%;width:1016px;}}</style><div style="" class="PG3">{% if action_form and actions_on_top and cl.show_admin_actions %}{% admin_actions %}{% endif %} <!-There will be diff diff effect if we use the range from h1 to h6 tags and for p tag --><br><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><a style="color:white;background-color:#999999;border-radius:10px;padding:5px 10px 5px 10px;font-size:12px;">CHANGE OUR USER&emsp;<i class="fa fa-pencil" aria-hidden="true" style=""></i></a><br><br>{% result_list cl %} {% if action_form and actions_on_bottom and cl.show_admin_actions %}{% admin_actions %}{% endif %}</div>{% endblock %}</form>

{% block pagination %}
<style>
@media only screen and (min-width: 1300px) {
.PG4{position:absolute;left:20%;top:70%;width:1016px;}}</style><div style="" class="PG4">{% pagination cl %}</div>{% endblock %}

这将使您的更改列表页面如下所示:

注意:我已使其仅适用于特定范围的浏览器宽度，但您可以放置​​更多媒体查询来扩展此效果以适应较大范围。

我希望这就是你想要的。