Part15 Xadmin自定义布局

一、前言

本Part,将介绍Django-Xadmin的布局自定义方式。

参考了UserAdmin的布局改写:https://www.cnblogs.com/adc8868/p/7506973.html

但是我门总是不仅仅局限于用户管理这个页面的改写,所以本Part将以practise.Basic这个录入控件案例为例,介绍如何在Xadmin快速布局。

二、目录结构总览

1、本part,我们在这个结构下进行代码填充:

Project 目录 (Django-Xadmin学习项目)
|
|-- app         
|   `-- practise  
...

三、官方代码

1、首先我们先看看Xadmin中UserAdmin的布局是怎么写的
(1)如果是extra_app拷到项目中的,则找到这个路径

打开项目中的:/extra_app/
找到这个文件:xadmin/plugins/auth.py

(2)如果是pip安装到Python环境中的,则找到这个路径

到你的Python环境:D:\Programs\Python\Python36\venv\xadmin_learn\Lib\site-packages
找到这个文件:xadmin/plugins/auth.py

2、找到UserAdmin类的get_form_layout方法(大概在83行):

...
class UserAdmin(object):
  ...
  def get_form_layout(self):
      ...

3、对着用户管理界面,学习布局的代码。

四、效果图

1、首先这次我们要对practise.Basic的布局进行改造,我们看看原来的布局是怎么样的


原来的布局

2、再看看自定义布局后的样子


自定义的布局

3、可以看出来,布局可以更紧凑,更灵活

五、追加代码

1、在project/app/practise/adminx.py的class BasicAdmin,属性的下方,追加这个方法:

# -*- coding: utf-8 -*-
import xadmin
# 这也是追加的
from django.utils.translation import ugettext as _
from xadmin.layout import Fieldset, Main, Side, Row

from .models import Basic


class BasicAdmin(object):
    list_display = ['input_single']  # 控制显示列数  
    search_fields = ['input_single']  # 控制搜索框的显示
    list_filter = ['input_single']  # 控制筛选

    # 这是追加的
    def get_form_layout(self):
        self.form_layout = (
            Main(
                Fieldset(_('文本录入案例'),
                         'input_single',
                         'input_multi',
                         'input_slug',
                         Row('input_integer', 'input_positive_integer',),
                         Row('input_float', 'input_big_integer', ),
                         ),
                Fieldset(_('日期录入案例'),
                         Row('input_date', 'input_time'),
                         'input_datetime'
                         ),
                Fieldset(_('网络录入案例'),
                         'input_url',
                         'input_email',
                         'input_generic_ip',
                         ),
                Fieldset('',
                         'add_time',
                         css_class='unsort no_title'
                         ),
            ),
            Side(
                Fieldset(_('其他'),
                         'input_null_boolean'
                         ),
                Fieldset(_('其他'),
                         'input_null_boolean'
                         ),
            )
        )
        return super(BasicAdmin, self).get_form_layout()

xadmin.site.register(Basic, BasicAdmin)

2、从代码可以看出,要进行自定义xadmin布局,要做2个步骤:
(1)在import上引入了一些依赖;
(2)在class里面,追加了一个方法“get_form_layout(self)”

3、其中“get_form_layout(self)”方法和UserAdmin中“get_form_layout(self)”最大的不同,是UserAdmin多了一行

if self.org_obj:

的判断,而我们自己定义的类中,是不需要这个判断的。

4、完工!