概述:xadmin作为Django的一种后台管理框架,给我们提供了非常灵活的插件机制。除了我们在官网中可以看到的Xadmin plugin,包括Action、data filters、图表插件、书签、数据导出功能等,我们还可以通过继承它的BaseAdminPlugin父类来进行更强大的定制。
在一些特殊的需求中,当我们对xadmin的数据管理平台有一些更加个性化的需求时,xadmin自带的默认插件可能就满足不我们了。如我们都知道xadmin是一个数据管理平台,但现在的需求是需要在这个数据管理平台中嵌入一些非数据页面,比如输入框、表单等,我们就需要自己手动对xadmin进行扩展。首先,如果要在xadmin中展示一个数据管理页面,首先是在Django的models.py文件中创建一个Model类,再通过adminx.py文件将创建的models注册到xadmin中,最后在页面上对该models对一些操作管理显示出来。现在我们要新增一个自定义的页面,同样需要在models.py文件中新增一个类,并继承models.Model父类,由于我们要创建的页面并不是用于作数据管理,所以该model中不需要编写任何的字段,直接写它的Meta。
效果图1定义页面:
1. models.py代码
from django.db import models
class Test(models.Model):
class Meta:
verbose_name = u"自定义页面"
verbose_name_plural = verbose_name
注意:如果点击自定义页面报错,就迁移一下文件,生成数据表即可,库里会多一张没用的表,后面我们会将在原有的页面上进行扩张而不新建页面
接下来,在adminx.py文件中对我们刚刚创建的Test model编写相应的TestAdmin:
2. adminx.py代码
import xadmin
from .models import Students, Test
from xadmin.views import CommAdminView
class TestAdmin(object):
object_list_template = "test.html"
def get_context(self):
context = CommAdminView.get_context(self)
students = Students.objects.all().order_by("enter_date")
enter_date = []
age = []
for s in students:
# 必须把datetime类型转换为字符串类型
enter_date.append(s.enter_date.strftime("%Y-%m-%d"))
age.append(s.age)
context.update(
{
"enter_date": enter_date,
"age": age
}
)
return context
# 注册
xadmin.site.register(Test, TestAdmin)
3. html代码
{#test.html#}
{#继承自xadmin/base_site.html#}
{% extends 'xadmin/base_site.html' %}
{# 去掉标签栏 #}
{% block content-nav %}
{% endblock %}
{% block content %}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<div id="echarts_bar" style="width: 600px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('echarts_bar'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['年龄']
},
xAxis: {
{#data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]#}
data: {
{ enter_date | safe }} // safe禁用转义
},
yAxis: {},
series: [{
name: '年龄',
type: 'bar', // 柱状图
{#type: 'line', // 折线图#}
{#type: 'pie',#}
{#data: [5, 20, 36, 10, 10, 20]#}
data: {
{ age }}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
</script>
{% endblock content %}