給xadmin後臺list頁面添加自定義控件

我和xadmin後臺自定義的愛恨糾葛之自定義控件添加,需求是給xadmin後臺的list頁面添加一個篩選框,可以選擇不同的類目,只返回屬於該類目的數據

最終效果

在這裏插入圖片描述

準備控件用到的html

找個用到search_fields字段的頁面
在這裏插入圖片描述
將搜索框的HTML直接複製下來

<form class="navbar-form navbar-left" action="" method="get">
    <div class="input-group search-group">
    <input id="searchbar" class="form-control" type="text" name="_q_" value="" placeholder="搜索 公司信息">
    <span class="input-group-btn">
    	<button class="btn btn-primary" type="submit">
    	<i class="fa fa-search"></i>
    	</button>
    </span>
    </div>
</form>

轉變成我們自己的html,相關的name、id可以自定義,我把原來的搜索按鈕隱藏了,目的是想實現在點擊篩選項時調用提交按鈕

{% load i18n %}
<form class="navbar-form navbar-left" action="" method="get">
    <div class="input-group search-group">
    <select name="search_field" class="select form-control" id="search_field" onchange="submitselect()">
        <option value="">請選擇篩選項</option>
        <option value="0">全部</option>
    </select>
        # 注意我這裏把原來的搜索按鈕隱藏了
        <button class="btn btn-primary" type="submit" id="btn" style="display: none"></button>
    </div>
</form>

給下拉框添加動態數據,寫相關的js

<script>
    # 頁面加載時訪問自己寫的接口獲取篩選項
    $(document).ready(function () {
            $.getJSON('接口',function (data) {
                if(data.status==0){
                    var btnobj = data.data['xxx'];
                    for(var i=0;i<btnobj .length;i++){
                        $('#search_field').append("<option value='"+btnobj[i].id+"'>"+btnobj[i].name+"</option>")
                    }
                }
            })
    });

   # 點擊下拉框中的篩選項時觸發提交按鈕
    function submitselect() {
        $('#btn').click()
    }
</script>

將寫好的控件添加到adminx文件中

將下面代碼加入adminx文件,後續在需要自定義控件的類中將isExcute置爲True就可以開啓控件了

from django.template.context import RequestContext
from xadmin.views import BaseAdminPlugin, ListAdminView
from django.template import loader
def get_context_dict(context):
    if isinstance(context, RequestContext):
        ctx = context.flatten()
    else:
        ctx = context
    return ctx

class CustomizePlugin(BaseAdminPlugin):
    isExcute = False 
    def init_request(self, *args, **kwargs):
        return bool(self.isExcute)

    def block_nav_form(self, context, nodes):
        nodes.append(loader.render_to_string('控件.html', get_context_dict(context)))

xadmin.site.register_plugin(CustomizePlugin, ListAdminView)

在需要控件的類中開啓isExcute,重寫查詢方法

class ModelAdmin(object):
    list_display = []
    isExcute = True

    def queryset(self):
        qs = Model.objects.all()
        # 根據選擇的篩選項查詢屬於該類目的數據,如果沒傳入類目則返回所有數據
        search_field = int(self.request.GET.get('search_field',0))
        if search_field:
            qs = qs.filter(id=search_field)
        return qs

OK!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章