django-xadmin自定义widget插件（自定义详情页字段的显示样式）

概述有时候我们想要修改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 @R_301_6658@or('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,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  ID="m2m_%s" >%s</div>'                             '<div >'                                '<input type="text" ID="selectPage_%s"  name="%s" value=%s placeholder="请输入查询关键字">'                             '</div>'                         '</div>'                         %(name,choices_data,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 @R_301_6658@or('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

总结

以上是内存溢出为你收集整理的django-xadmin自定义widget插件（自定义详情页字段的显示样式）全部内容，希望文章能够帮你解决django-xadmin自定义widget插件（自定义详情页字段的显示样式）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。