xadmin后台页面的自定制

时间:2023-03-08 22:04:24
xadmin后台页面的自定制

01-自定制页面

注:最近找到了更好的解决办法:重写钩子函数版  https://www.cnblogs.com/pgxpython/p/10593507.html

需求背景:根据要实现的功能需求,xadmin的后台页面不满足现有要求,需要进行自定义页面来替换后台固有页面,所以要在源码上入手

修改前的页面:

xadmin后台页面的自定制

修改后的效果:

xadmin后台页面的自定制

解决方法:

xadmin的处理流程和django类似,都是通过拦截URL,然后封装数据,再在页面解析。

思路:

.在views/base.py中添加控制(是否需要跳转,跳转的url)

.在templates/xadmin/base_site.html 中根据上一步传过来的值控制显示内容(用iframe) 或者 在 base_site.html 里添加自定义的HTML内容 (我就是添加的html代码)

.自己编写处理该url的页面和view.py,然后iframe中就会显示该页面

实现代码:

# xadmin/views/base.py

class CommAdminView(BaseAdminView):
@filter_hook
def get_context(self):
for menu in nav_menu:
check_selected(menu, self.request.path) # 添加自定义url,视图函数获取数据
add_url_flag = False
auto_title = ''
pid = ''
subtitle = ''
print(self.request.get_full_path())
if '/xadmin/cashflows/cash_title_content/' in self.request.get_full_path():
from apps.cashflows.models import cash_title_link, cash_title_content
add_url_flag = True
auto_title = cash_title_link.objects.all()
# print('title', title)
pid = self.request.GET.get('pid')
# print('pid', pid, type(pid))
if pid:
subtitle = cash_title_content.objects.filter(content_cash_id=pid)
pid = int(pid)
else:
subtitle = None
else:
pass print('auto_title', auto_title)
print('pid', pid)
print('subtitle', subtitle)
context.update({
'menu_template': self.menu_template,
'nav_menu': nav_menu,
'site_title': self.site_title,
'site_footer': self.site_footer,
'breadcrumbs': self.get_breadcrumb(), # 自定义获取的数据,返回给base_site.html页面
'add_url_flag': add_url_flag,
'auto_title': auto_title,
'subtitle': subtitle,
'pid': pid,
}) return context
# xadmin/templates/xadmin/base_site.html

    {% if add_url_flag %}
<div class="col-sm-3 col-sm-offset-1 panel panel-primary" style="padding: 0;">
<div class="panel-heading">表单项目名称表</div>
<div style="width:389px; height:347px; overflow:scroll; text-align: center">
<table class="table table-hover">
<tr>
<th style="text-align: center">序号</th>
<th style="text-align: center">表单名称</th>
</tr>
{% for i in auto_title %}
<tr class="{% if pid == forloop.counter %}active{% endif %}">
<td >{{ forloop.counter }}</td>
<td ><a href="?pid={{ forloop.counter }}">{{ i }}</a></td>
</tr>
{% endfor %}
</table>
</div>
</div>
<div class="col-sm-3 col-sm-offset-1 panel panel-success" style="padding: 0;">
<div class="panel-heading">表单名称下的标题</div>
<div style="width:389px; height:347px; overflow:scroll; text-align: center">
<table class="table" style=" text-align: center">
<tr>
<th style="text-align: center">序号</th>
<th style="text-align: center">标题</th>
</tr> {% for a in subtitle %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ a }}</td>
</tr>
{% endfor %}
</table>
</div>
</div>
{% else %}
{% block content %}
{#此处为 原有的后台显示内容及页面展示样式#}
{{ content }}
{% endblock %}
{% endif %}

base_site.html部分源码介绍:

{% block breadcrumbs %}
<ul class="breadcrumb">
{% if breadcrumbs %}
{% for bc in breadcrumbs %}
<li>
{% if forloop.last or not bc.url %}{{ bc.title }}
{% else %}<a href="{{ bc.url }}">{{ bc.title }}</a>{% endif %}
</li>
{% endfor %}
{% else %}
<li><a href="{% url 'xadmin:index' %}">{% trans 'Home' %}</a></li>
{% if title %}{{ title }}{% endif %}
{% endif %}
</ul>
{% endblock %}

以上代码实现的效果为:

xadmin后台页面的自定制

{% block content-nav %}
<div class="navbar content-navbar navbar-default navbar-xs" data-toggle="breakpoint"
data-class-xs="navbar content-navbar navbar-inverse navbar-xs"
data-class-sm="navbar content-navbar navbar-default navbar-xs">
<div class="navbar-header">
{% view_block 'nav_toggles' %}
{% block nav_toggles %}
{% include "xadmin/includes/toggle_back.html" %}
{% endblock %} <a class="navbar-brand" data-toggle="collapse" data-target="#top-nav .navbar-collapse">
{% block nav_title %}{% endblock %}
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% view_block 'nav_menu' %}
</ul>
{% view_block 'nav_form' %}
{% block nav_form %}{% endblock %}
<div class="navbar-btn pull-right hide-xs">
{% view_block 'nav_btns' %}
{% block nav_btns %}{% endblock %}
</div>
</div>
</div>
{% endblock %}

以上代码实现的效果为:

xadmin后台页面的自定制

参考文章:https://www.cnblogs.com/lanqie/p/8675533.html