第三百八十二節，Django+Xadmin打造上線標准的在線教育平台—xadmin管理員詳情頁面布局，導航圖標設置

第三百八十二節，Django+Xadmin打造上線標准的在線教育平台—xadmin進階

 

1、后台管理員詳情頁面布局

后台管理員詳情頁面，區塊是可以拖動的，而且分為了很多個區塊

 

這個頁面的布局在xadmin/plugins/auth.py里的UserAdmin類，修改這個類里的get_form_layout函數，就可以修改布局

def get_form_layout(self):
    if self.org_obj:
        self.form_layout = (
        #Fieldset表示一個區塊
            Main(
                Fieldset('',
                         'username', 'password',                    # 顯示字段
                         css_class='unsort no_title'                # css_class='unsort no_title'表示定位區塊不能拖動
                         ),
                Fieldset(_('Personal info'),                        #Fieldset第一個參數表示區塊名稱
                         Row('first_name', 'last_name'),            # Row 表示將里面的字段作為一行顯示
                         'email',
                         ),
                Fieldset(_('Permissions'),
                         'groups', 'user_permissions',
                         ),
                Fieldset(_('Important dates'),
                         'last_login', 'date_joined',
                         ),
            ),
            #Side表示狀態區塊
            Side(
                Fieldset(_('Status'),
                         'is_active', 'is_staff', 'is_superuser',
                         ),
            )
        )
    return super(UserAdmin, self).get_form_layout()

如下修改將所有區塊定位，不能拖動

    def get_form_layout(self):
        if self.org_obj:
            self.form_layout = (
                Main(
                    Fieldset('',
                             'username', 'password',
                             css_class='unsort no_title'
                             ),
                    Fieldset(_('Personal info'),
                             Row('first_name', 'last_name'),
                             'email',
                             css_class='unsort no_title'
                             ),
                    Fieldset(_('Permissions'),
                             'groups', 'user_permissions',
                             css_class='unsort no_title'
                             ),
                    Fieldset(_('Important dates'),
                             'last_login', 'date_joined',
                             css_class='unsort no_title'
                             ),
                ),
                Side(
                    Fieldset(_('Status'),
                             'is_active', 'is_staff', 'is_superuser',
                             ),
                )
            )
        return super(UserAdmin, self).get_form_layout()

 

 

2、導航圖標設置

導航圖標采用font-awesome圖標

如果想用最新版本的font-awesome圖標，到中文網站http://fontawesome.dashgame.com/  下載解壓后將解壓的css和fonts兩個文件夾，替換xadmin/static/xadmin/vendor/font-awesome/下的相同文件

導航子目錄圖標設置，也就是數據表的圖標

在當前app目錄下的adminx.py數據庫表注冊的管理器里設置
model_icon = 'fa fa-圖標名稱'
如：model_icon = 'fa fa-user-plus'

#!/usr/bin/env python
# -*- coding:utf8 -*-

import xadmin
from xadmin import views                # 導入xadmin的views

from .models import Users, Email, Banner


class BasdSetting(object):              # 主題管理器
    enable_themes = True                # 使用主題
    use_bootswatch = True
xadmin.site.register(views.BaseAdminView, BasdSetting)      # 將主題管理器綁定views.BaseAdminView注冊


class GlobalSettings(object):                               # 頭部系統名稱和底部版權管理器
    site_title = '玉秀管理系統'                              # 頭部系統名稱
    site_footer = '玉秀管理系統，玉秀公司版權所有'             # 底部版權
    menu_style = 'accordion'                                # 設置數據管理導航折疊，以每一個app為一個折疊框
xadmin.site.register(views.CommAdminView, GlobalSettings)   # 頭部系統名稱和底部版權管理器綁定views.CommAdminView注冊


class UsersAdmin(object):               # 自定義用戶信息數據表管理器類
    # 設置xadmin后台顯示字段
    list_display = ['username', 'password', 'nick_name', 'gender', 'email', 'address', 'mobile',
                    'first_name', 'last_name', 'is_active', 'birday', 'last_login', 'date_joined']
    # 設置xadmin后台搜索字段，注意：搜索字段如果有時間類型會報錯
    search_fields = ['username', 'password', 'nick_name', 'gender', 'email', 'address', 'mobile']
    # 設置xadmin后台過濾器帥選字段，時間用過濾器來做
    list_filter = ['username', 'password', 'nick_name', 'gender', 'email', 'address', 'mobile',
                    'first_name', 'last_name', 'is_active', 'birday', 'last_login', 'date_joined']
    model_icon = 'fa fa-user-plus'
xadmin.site.register(Users, UsersAdmin)     # 將戶信息數據表注冊到xadmin后台顯示

 

 

導航主目錄圖標設置，也就是自定義的app名稱的圖標

這個我沒找到可以設置的地方只有改源碼了

修改源碼

修改xadmin/templates/xadmin/includes/sitemenu_accordion.html文件

{% extends 'xadmin/includes/sitemenu_default.html' %}
{% load i18n xadmin_tags %}


{% block navbar_md %}
<div class="panel-group hide-sm nav-sitemenu col-md-2" id="nav-accordion">
  {% for item in nav_menu %}
  <div class="panel panel-{% if item.selected %}info{%else%}default{% endif %}">
    <div class="panel-heading">
      <h6 class="panel-title">
        <span class="badge badge-info">{{ item.menus|length }}</span>
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#nav-accordion" href="#nav-panel-{{forloop.counter}}">
          {% if item.url %}<a href="{{ item.url }}" class="section">{% endif %}
          {% if item.icon %}<i class="fa-fw {{item.icon}}"></i> {% elif item.first_icon %}  {#<i class="fa-fw {{item.first_icon}}"></i>#} {#這個標簽注釋后，當子導航設置了圖標時app名稱不顯示圖標#}
          {%else%}<i class="fa-fw fa fa-circle-o"></i>{% endif %}
          {% autoescape off %} {% trans item.title %} {% endautoescape %}   {#這里顯示的自定義app名稱，加上{% autoescape off %}{% endautoescape %}后在自定義名稱時可以通過class自定義圖標#}
          {% if item.url %}</a>{% endif %}
        </a>
      </h6>
    </div>
    <div id="nav-panel-{{forloop.counter}}" class="list-group panel-collapse collapse{% if item.selected %} in{% endif %}">
      {% for sitem in item.menus %}
      <a href="{{ sitem.url|default_if_none:'#' }}" class="list-group-item{% if sitem.selected %} active{% endif %}">
        {% if sitem.icon %}<i class="fa-fw {{sitem.icon}}"></i>{%else%}<i class="fa-fw fa fa-circle-o"></i>{% endif %}
        {{ sitem.title }}</span>
      </a>
      {% endfor %}
    </div>
  </div>
  {% endfor %}
</div>
{% endblock navbar_md %}

sitemenu_accordion.html文件修改后

在當前app目錄的apps.py文件里設置后台app名稱時用class自定義圖標

from django.apps import AppConfig


class AppUsersConfig(AppConfig):
    name = 'app_users'                  # app目錄名稱
    verbose_name = '<i class="fa fa-user-secret"></i>用戶管理'  # 要設置的中文名稱