Django-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:ProgramsPythonPython36venvxadmin_learnLibsite-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:

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

作者：不愿透露姓名的撸大湿
链接：https://www.jianshu.com/p/c381832dc5ff
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。