xadmin后台頁面的自定制

01-自定制頁面

注：最近找到了更好的解決辦法：重寫鈎子函數版  https://www.cnblogs.com/pgxpython/p/10593507.html

需求背景：根據要實現的功能需求，xadmin的后台頁面不滿足現有要求，需要進行自定義頁面來替換后台固有頁面，所以要在源碼上入手

修改前的頁面：

修改后的效果：

解決方法：

 xadmin的處理流程和django類似,都是通過攔截URL,然后封裝數據,再在頁面解析。

思路：

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

2.在templates/xadmin/base_site.html 中根據上一步傳過來的值控制顯示內容(用iframe) 或者 在 base_site.html 里添加自定義的HTML內容 (我就是添加的html代碼)

3.自己編寫處理該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 %}

以上代碼實現的效果為：

{% 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 %}

以上代碼實現的效果為：

 

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