我和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!