有時候我們想要修改xadmin詳情頁欄位的顯示方式，比如django預設的ImageField在後臺顯示的是image的url，我們更希望看到image的縮略圖；再比如django將多對多欄位顯示為多選的下拉框或者左右選擇欄的方式，向圖片展示的這兩種： 如果我想要上面這種帶搜索功能並且只占一行的效果 ...
有時候我們想要修改xadmin詳情頁欄位的顯示方式，比如django預設的ImageField在後臺顯示的是image的url，我們更希望看到image的縮略圖；再比如django將多對多欄位顯示為多選的下拉框或者左右選擇欄的方式，向圖片展示的這兩種：
如果我想要上面這種帶搜索功能並且只占一行的效果該如何做呢？
這就需要我們自定義widget插件了。
那麼什麼是widget插件呢？
django admin在渲染form表單時，會根據欄位的類型（ImageField、DateTtimeField、TextField等等）將欄位渲染成不同的展示效果，那麼在哪裡規定這些展示效果呢，就需要widget插件了，django中每種欄位類型都會對應一種插件，插件規定了字體大小顏色排布方式等。插件本質就是一個class， django-xadmin的插件位於xadmin\widgets.py文件中。
下麵就以多對多欄位為例，介紹自定義widget方法。
定義widget：
xadmin\widgets.py
可以用self.attrs獲取之前傳遞的request相關的參數
class M2MFilterWidget(forms.SelectMultiple):
# media方法是引入你所需要的js、css文件
@property
def media(self):
# 共四個文件：bootstrap.min.css jquery-1.11.0.min.js selectpage.css selectpage.js，前兩個系統已經載入，只需再載入後兩個
return vendor('xadmin.widget.selectpage.js', 'xadmin.widget.selectpage.css')
# render方法是渲染你要展示欄位的樣式，通常返回html字元串
def render(self, name, value, attrs=None):
# 將資料庫中已經被選中的值展示到頁面，要將value（[1,3,5,8...]列表格式）轉化為value_str（‘1,3,5,8’字元串格式）
value_str = ','.join(map(str, value)) if value else ''
# 可以用self.attrs獲取之前傳遞的request相關的參數
attrs = self.attrs
# 獲取多對多欄位的所有可選選項傳遞到前端，以便前端進行搜索過濾
choices = self.choices.field._queryset
# choices_data格式固定
choices_data = [{'id': choice.id, 'name': choice.username} for choice in choices]
return mark_safe('<div >'
'<div class="m2mfilter" id="m2m_%s" style="display: none">%s</div>'
'<div class="col-md-12">'
'<input type="text" id="selectPage_%s" class="form-control" name="%s" value=%s placeholder="請輸入查詢關鍵字">'
'</div>'
'</div>'
%(name, choices_data, name, name, value_str))
註意：
引入的js css文件名必須是xadmin.widget.xxx.js、xadmin.widget.xxx.css格式，而且要放在xadmin/static/js、xadmin/static/css下麵，具體原因我就不展開講了，有興趣你可以追蹤下verdor這個函數裡面就知道了。
另外如果你的需求和本例一樣，'xadmin.widget.selectpage.js', 'xadmin.widget.selectpage.css'這兩個文件可以評論或者私信和我要。也可以在這裡下載
https://download.csdn.net/download/bocai_xiaodaidai/11422561
https://download.csdn.net/download/bocai_xiaodaidai/11422556
使用自定義的widget：
1、在詳情頁使用，要在adminx.py中設置
adminx.py
#kwargs['widget'] = M2MFilterWidget(attrs={'input_type': 'hidden', 'user_id':self.request.user.id})這種寫法的作用是可以將當前請求的某些參數傳遞到widget中。因為在widget中是無法獲取request相關參數的。
m2mfilter_list = ['interviewer_1', 'interviewer_2', 'interviewer_3']
# 給當前模型所有ManyToManyField欄位指定widget
# formfield_overrides = {models.ManyToManyField: {'widget': M2MFilterWidget}}
#給當前模型某個Field欄位指定widget
def formfield_for_dbfield(self, db_field, **kwargs):
if db_field.name in self.m2mfilter_list:
kwargs['widget'] = M2MFilterWidget
#kwargs['widget'] = M2MFilterWidget(attrs={'input_type': 'hidden', 'user_id':self.request.user.id})
return db_field.formfield(**kwargs)
return super().formfield_for_dbfield(db_field, **kwargs)
大功告成，打開瀏覽器就可以看到這個多對多欄位的顯示方式為下麵這樣了：
2、在自定義表單中使用
class BulkEditForm(forms.ModelForm):
class Meta:
model = HrUser
fields = ['username', 'owner']
widgets = {
'owner': M2MFilterWidget,
}
class BulkEditAction(BaseActionView):
action_name = "bulk_edit_action"
description = '修改所選簡歷 所有者'
model_perm = 'change'
# 這裡要重寫media方法載入靜態文件
@property
def media(self):
return vendor('xadmin.widget.selectpage.js', 'xadmin.widget.selectpage.css')
def do_action(self, queryset):
title = '請選擇簡歷 所有者'
form = BulkEditForm()
hruser_projected = []
username_list = []
for obj in queryset:
username_list.append(obj.username)
if not is_group_member(self.request, settings.CONSTANTS['MANAGER_GROUP_NAME']):
hruser_projected.append('簡歷:' + obj.username)
context = self.get_context()
context.update({
"title": title,
'queryset': queryset,
'usernames': '，'.join(username_list),
'form': form,
"hruser_projected": hruser_projected,
"opts": self.opts,
"app_label": self.app_label,
})
return TemplateResponse(self.request,'xadmin/bulk_edit.html', context)
如果你想將ImageField欄位顯示為圖片縮略圖而非圖片地址，可以看下我的這篇文章
https://blog.csdn.net/bocai_xiaodaidai/article/details/95179098
原文鏈接：https://blog.csdn.net/bocai_xiaodaidai/article/details/95172133
