当前位置: 首页 > news >正文

第三百八十二节,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>用户管理'  # 要设置的中文名称

 

 

 

转载于:https://www.cnblogs.com/adc8868/p/7506973.html

相关文章:

  • POJ 3134 - Power Calculus
  • hdu 6201 transaction transaction transaction
  • java的(PO,VO,TO,BO,DAO,POJO)解释
  • Cent OS服务器配置(JDK+Tomcat+MySQL)
  • python库基础练习
  • 可以直接cat 多个fq.gz压缩文件
  • 条件、循环、函数定义 练习
  • 深入学习微框架:Spring Boot
  • 原创:mysql下载 实战 最强最全的无脑白痴版 给小白的爱
  • sql语句执行碰到的问题
  • 数据类型和运算符
  • JSP中文乱码问题
  • shell脚本进阶(二)
  • ServiceLoader的使用
  • PHP的memory_limit引起的问题
  • ----------
  • 《深入 React 技术栈》
  • 【剑指offer】让抽象问题具体化
  • CSS选择器——伪元素选择器之处理父元素高度及外边距溢出
  • Java 内存分配及垃圾回收机制初探
  • JavaScript 一些 DOM 的知识点
  • Java多态
  • JAVA之继承和多态
  • leetcode98. Validate Binary Search Tree
  • mongodb--安装和初步使用教程
  • SpringBoot 实战 (三) | 配置文件详解
  • SQLServer之索引简介
  • Tornado学习笔记(1)
  • 阿里云购买磁盘后挂载
  • 简单数学运算程序(不定期更新)
  • 排序(1):冒泡排序
  • 时间复杂度与空间复杂度分析
  • 线上 python http server profile 实践
  • Spring第一个helloWorld
  • ​业务双活的数据切换思路设计(下)
  • #etcd#安装时出错
  • #mysql 8.0 踩坑日记
  • #QT(串口助手-界面)
  • $ is not function   和JQUERY 命名 冲突的解说 Jquer问题 (
  • (04)Hive的相关概念——order by 、sort by、distribute by 、cluster by
  • (博弈 sg入门)kiki's game -- hdu -- 2147
  • (十六)串口UART
  • (原創) 人會胖會瘦,都是自我要求的結果 (日記)
  • (转)Android学习笔记 --- android任务栈和启动模式
  • (转)IIS6 ASP 0251超过响应缓冲区限制错误的解决方法
  • .NET CORE 2.0发布后没有 VIEWS视图页面文件
  • .net MySql
  • .NET 依赖注入和配置系统
  • .NET/C# 检测电脑上安装的 .NET Framework 的版本
  • .NET国产化改造探索(一)、VMware安装银河麒麟
  • .NET使用存储过程实现对数据库的增删改查
  • @ModelAttribute 注解
  • @requestBody写与不写的情况
  • [20150321]索引空块的问题.txt
  • [20180224]expdp query 写法问题.txt