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

有时候我们想要修改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,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,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

原文地址:https://www.cnblogs.com/zmdComeOn

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


注:所有源代码均实测运行过。所有源代码均已上传CSDN,请有需要的朋友自行下载。
继承APIView和ViewSetMixin;作用也与APIView基本类似,提供了身份认证、权限校验、流量管理等。ViewSet在开发接口中不经常用。
一、Django介绍Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。Django 是一个开放源代码的 Web 应用框架,由 Python 写成。Django 遵守 BSD 版权,初次发布于 2005 年 7 月, 并于 2008 年 9 月发布了第一个正式版本 1.0 。Django学习线路Django 采用了 MVT 的软件设计模式,即模型(Model),视图(View)和模板(Template)。这个MVT模式并
本文从nginx快速掌握到使用,gunicorn快速掌握到使用,实现小白快速搭建django项目,并对可能出现的报错进行了分析
uniapp微信小程序订阅消息发送服务通知
Django终端打印SQL语句 1 Setting配置: 2 默认python 使用的MysqlDB连接,Python3 支持支持pymysql 所有需要在app里面的__init__加上下面配置:
url: re_path(&#39;authors/$&#39;, views.AuthorView.as_view()), re_path(&#39;book/(?P\d+)/$&#39;, vie
前提 关于html寻找路线: template 如果在各个APP中存在, Django 会优先找全局template 文件下的html文件,如果全局下的template文件没有相关的html Djan
// GET请求request.GET // POST请求request.POST // 处理文件上传请求request.FILES // 处理如checkbox等多选 接受列表request.get
from bs4 import BeautifulSoup#kindeditordef kindeditor(request): s = &#39;&#39;&#39; &lt;li&gt;&lt;s
view.py 配置 html 配置
from django.http import JsonResponse JsonResponse 里面代码会加这一个响应头 kwargs.setdefault(&#39;content_type&#
#下面两种是基于QuerySet查询 也就是说SQL中用的jion连表的方式查询books = models.UserInfo.objects.all() print(type(books)) &gt
return HttpResponse(&quot;OK&quot;) 返回一个字符串 return redirect(&quot;/index/&quot;) 返回URL return render
from django.http import JsonResponse JsonResponse 里面代码会加这一个响应头 kwargs.setdefault(&#39;content_type&#
浏览器有一个很重要的概念——同源策略(Same-Origin Policy)。所谓同源是指,域名,协议,端口相同。不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况
自动发送 &gt; 依赖jQuery文件 实例--&gt;GET请求: 手动发送 &gt; 依赖浏览器XML对象(也叫原生ajax) Ajax主要就是使用 【XmlHttpRequest】对象来完成请
#下面两种是基于QuerySet查询 也就是说SQL中用的jion连表的方式查询books = models.UserInfo.objects.all() print(type(books)) &gt
// GET请求request.GET // POST请求request.POST // 处理文件上传请求request.FILES // 处理如checkbox等多选 接受列表request.get
return HttpResponse(&quot;OK&quot;) 返回一个字符串 return redirect(&quot;/index/&quot;) 返回URL return render