第三百九十六节，Django+Xadmin打造上线标准的在线教育平台—其他插件使用说，自定义列表页上传插件

第三百九十六节，Django+Xadmin打造上线标准的在线教育平台—其他插件使用说，自定义列表页上传插件

设置后台列表页面字段统计

在当前APP里的adminx.py文件里的数据表管理器里设置

aggregate_fields = {'字段名称':'sum为统计数，min为统计时间'}

class CourseAdmin(object):               # 自定义数据表管理器类

    # 设置xadmin后台显示字段
    list_display = ['name', 'desc', 'detail', 'degree', 'learn_times', 'students',
                    'fav_nums', 'image', 'click_nums', 'add_time']

    # 设置xadmin后台搜索字段，注意：搜索字段如果有时间类型会报错
    search_fields = ['name', 'desc', 'detail', 'degree', 'learn_times', 'students',
                     'fav_nums', 'image', 'click_nums']

    # 设置xadmin后台过滤器帅选字段，时间用过滤器来做
    list_filter = ['name', 'desc', 'detail', 'degree', 'learn_times', 'students',
                   'fav_nums', 'image', 'click_nums', 'add_time']
    model_icon = 'fa fa-clone'
    style_fields = {'detail':'ueditor'}
    # import_excel = True
    aggregate_fields = {'fav_nums':'sum'}

xadmin.site.register(Course, CourseAdmin)     # 将数据表注册到xadmin后台显示

自定义列表页上传插件

注册插件APP

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app_users',                        # 注册 APP
    'app_courses',
    'app_organization',
    'app_operation',
    'xadmin',                           # 注册xadmin的app
    'reversion',
    'crispy_forms',                     # 注册xadmin的依赖app
    'captcha',                          # 注册验证码app
    'pure_pagination',                  # 注册分页app
    'DjangoUeditor',                    # 注册DjangoUeditor的APP
    'wen_jian_shang_chuanpy',           # 注册上传插件app
]

配置插件上传URL路由逻辑

from extra_apps.wen_jian_shang_chuanpy.shang_chuan_wen_jian import Shang_chuan_wen_jian
urlpatterns = [
    url(r'^xadmin/', xadmin.site.urls),

    url(r'^index.html', TemplateView.as_view(template_name='index.html'), name='index'),

    # 注册
    url(r'^register.html', zhu_ce.as_view(), name='register'),
    url(r'^captcha/', include('captcha.urls'), name='captcha'),
    url(r'^active/(?P<active_de>.*)/$', active_code.as_view(), name="user_active"),

    # 登录
    url(r'^login.html', TemplateView.as_view(template_name='login.html'), name='login'),
    url(r'^deng_lu', deng_lu.as_view(), name='deng_lu'),
    url(r'^logout', logout.as_view(), name='deng_lu'),

    # 授课机构
    url(r'^org_list.html', org_list.as_view(), name='org_list'),

    # 专门处理静态资源请求映射，也就是media上传文件夹里的请求映射
    url(r'media/(?P<path>.*)$', serve, {'document_root': MEDIA_ROOT}),

    # 配置静态文件访问
    # url(r'static/(?P<path>.*)$', serve, {'document_root': STATIC_ROOT}),

    url(r'course_comment.html', course_comment.as_view(), name='course_comment'),
    url(r'usercenter_info.html', usercenter_info.as_view(), name='usercenter_info'),

    # 上传头像
    url(r'touxiang/', touxiang.as_view(), name='touxiang'),

    # 配置DjangoUeditor富文本路由映射
    url(r'^ueditor/', include('DjangoUeditor.urls')),

    # 配置后台上传映射
    url(r'^shang_chuan_wen_jian/', Shang_chuan_wen_jian, name='Shang_chuan_wen_jian'),
]

models.py里要上传文件的类里自定义函数，函数里执行插件里的一个函数

class CourseResource(models.Model):
    course = models.ForeignKey(Course, verbose_name='外键课程表')
    name = models.CharField(max_length=100, verbose_name='课程资源名称')
    download = models.FileField(upload_to='course/resource/%Y/%m', storage=ImageStorage(), verbose_name='资源文件', max_length=100)
    add_time = models.DateTimeField(default=datetime.now, verbose_name='添加日期')

    class Meta:
        verbose_name = '课程资源表'
        verbose_name_plural = verbose_name

        # 自定义列

    def xiougai(self):
        from extra_apps.wen_jian_shang_chuanpy.shang_chuan_wen_jian import book_hanshu
        book = book_hanshu(self.download, self.id, 'app_courses', 'CourseResource', 'download')
        return book  # 返回HTML显示到页面
    xiougai.short_description = '修改文件'

    def __str__(self):
        return self.name

adminx.py里开启插件

class CourseResourceAdmin(object):
    list_display = ['course', 'name', 'download', 'add_time', 'xiougai']
    search_fields = ['course', 'name', 'download']
    list_filter = ['course', 'name', 'download', 'add_time']
    model_icon = 'fa fa-hdd-o'
    # list_editable = ['download']
    # show_detail_fields = ['download']
    shang_chuan_wen_jian = True

xadmin.site.register(CourseResource, CourseResourceAdmin)

插件文件shang_chuan_wen_jian.py

#!/usr/bin/env python
# -*- coding:utf8 -*-
import json
from django.shortcuts import render, HttpResponse, redirect
from django.views.decorators.csrf import csrf_exempt,csrf_protect
from django.utils.safestring import mark_safe                       # 允许执行html代码

from xadmin.sites import site
from xadmin.views import BaseAdminPlugin, ListAdminView, CommAdminView, ModelAdminView

from MxOnline import settings
from apps.utils.uploadfile import Uploadfile

def book_hanshu(download, id, app, models_biao, ziduan):
    """
    :第一个参数，接收上传数据字段的数据库数据
    :第二个参数，接收上传数据字段的数据库数据id
    :第三个参数，接收当前的APP名称
    :第四个参数，接收当前数据表的类名
    :第五个参数，接收，当前上传字段名称
    :return:
    """
    book = """
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span></button>
                    <h4 class="modal-title">上传文件</h4></div>
                <div class="modal-body">
                    <form method="post" enctype="multipart/form-data">
                        <div id="yuan_shi" class="alert alert-success"></div>
                        <div id="tishi" class="alert alert-success">请选择您要上传的文件</div>
                        <input id="file" class="btn btn-default" type="file" name="file"/>
                        <input id='app' value="" type="hidden" name="app"/>
                        <input id='models_biao' value="" type="hidden" name="models_biao"/>
                        <input id='n_id' value="" type="hidden" name="n_id"/>
                        <input id='ziduan' value="" type="hidden" name="ziduan"/>
                        <span id="daxiao"></span><br/>
                        <span id="daxiao2"></span><br/>
                        <div id="jdt" class="progress">
                            <div id="prog" class="progress-bar" style="min-width:20px; width: 0%;">0%</div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="shch_anllou" type="button" class="btn btn-primary">
                        上传文件
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--data-toggle="modal"声明事件切换类型，modal表示模态框类型(Bootstrap)-->
    <!--data-target="#myModal">声明事件操作对象，#myModal表示点击后关闭id为#myModal的元素(Bootstrap)-->
    <span></span>
    <button n_nr="{download}" n_id='{n_id}' app='{app}' models_biao='{models_biao}' ziduan='{ziduan}' class="btn btn-primary btn-xs xiou_gai" data-toggle="modal" data-target="#myModal">
        点击修改
    </button>
    """.format(download=download, n_id=id, app=app, models_biao=models_biao, ziduan=ziduan)
    return mark_safe(book)

# 上传逻辑
@csrf_exempt
def Shang_chuan_wen_jian(request):
    if request.method == "POST":
        file = request.FILES.get('file')                    # 获取上传文件对象
        xieru_wjian = Uploadfile('course/resource',file)

        app = request.POST.get('app')                       # 获取前台传过来的APP名称
        models_biao = request.POST.get('models_biao')       # 获取前台传过来的数据表名称
        n_id = request.POST.get('n_id')                     # 获取前台传过来的数据id
        ziduan = request.POST.get('ziduan')                 # 获取要修改的字段

        # 动态导入数据库模块
        orm = __import__('{0}.models'.format(app),models_biao,fromlist=True)
        pd_models_biao = hasattr(orm,models_biao)           # 判断当前数据表是否存在
        if pd_models_biao and xieru_wjian:
            hq_models_biao = getattr(orm,models_biao)       # 如果存在，找到数据表类
            xieru = {ziduan:xieru_wjian}
            biao = hq_models_biao.objects.filter(id=n_id).update(**xieru)
            if biao:
                return HttpResponse(json.dumps({'url':xieru_wjian}))
        else:
            return HttpResponse('数据表不存在')

    return HttpResponse('')

class EditablePlugin(BaseAdminPlugin):
    shang_chuan_wen_jian = False

    def init_request(self, *args, **kwargs):
        return bool(self.shang_chuan_wen_jian)

    # 在网页头部注入js[列表页，内容页]
    def block_extrahead(self, context, nodes):
        js = '<script type="text/javascript" src="{0}"></script>'.format(settings.STATIC_URL + 'shang_chuan_wen_jian.js')
        # js += '<script type="text/javascript" src="{0}"></script>'.format(settings.STATIC_URL + 'jquery.form.js')
        nodes.append(js)

site.register_plugin(EditablePlugin, ListAdminView)         # 列表逻辑

js文件

/**
 * Created by admin on 2017/9/26.
 */
jQuery(function ($) {

    var totalSize = 0;

    //初始化隐藏进度条
    $('#jdt').hide();

    //绑定所有type=file的元素的onchange事件的处理函数
    //当选定文件时触发函数
    $(':file').change(function () {
        var file = this.files[0]; //假设file标签没打开multiple属性，那么只取第一个文件就行了
        name = file.name;
        size = file.size;
        type = file.type;
        url = window.URL.createObjectURL(file); //获取本地文件的url，如果是图片文件，可用于预览图片

        //$(this).next().html("文件名：" + name + " 文件类型：" + type + " 文件大小：" + size + " url: " + url);

        totalSize += size;//字节
        var mb = parseInt(totalSize / 1024 / 1024);
        $("#daxiao").html("总大小: " + totalSize + "-字节");
        $("#daxiao2").html("总大小: " + mb + "-mb");

    });

    //点击修改按钮时触发函数
    $('.xiou_gai').click(function () {
        //获取需要传递到后台的参数
        var n_nr = $(this).attr('n_nr');
        var n_id = $(this).attr('n_id');
        var app = $(this).attr('app');
        var models_biao = $(this).attr('models_biao');
        var ziduan = $(this).attr('ziduan');
        //将参数填充到表单以便提交后台
        $('#yuan_shi').text('原始文件：' + n_nr);
        $('#n_id').val(n_id);
        $('#app').val(app);
        $('#models_biao').val(models_biao);
        $('#ziduan').val(ziduan);
    });

    //向表单区域添加一个form标签
    $('#myModal').wrap('<form id="form" method="post" enctype="multipart/form-data">');
    $('#form').wrap('<div id="form_zhuti">');

    //点击上传按钮后触发函数
    $('#shch_anllou').click(function () {
        var file_zhi = $('#file').val();
        if (file_zhi){
            upload()
        }else {
            $('#tishi').attr('class','alert alert-danger')
        }

    });

    //点击选择框后恢复提示框颜色
    $('#file').click(function () {
        $('#tishi').attr('class','alert alert-success');
        $('#tishi').text('请选择您要上传的文件')
    });

    //ajax提交函数
    function upload() {
        //创建FormData对象，初始化为form表单中的数据。需要添加其他数据可使用formData.append("property", "value");
        var formData = new FormData($('#form_zhuti form')[0]);
        $('#jdt').show();
        $.ajax({
            url: "/shang_chuan_wen_jian/",
            type: "POST",
            data: formData,
            dataType: 'json',
            //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
            xhr: function () {
                myXhr = $.ajaxSettings.xhr();
                //检查upload属性是否存在
                if (myXhr.upload) {
                    //绑定progress事件的回调函数
                    myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
                }
                return myXhr; //xhr对象返回给jQuery使用
            },
            success: function (result) {
                //返回json格式，里面是上传成功后的URL
                // alert(result.url);
                $('#yuan_shi').text(result.url);
                $('#tishi').text('恭喜上传成功！');
                $('#tishi').attr('class','alert alert-info');
                $('#tishi').attr({'style':'font-size:20px;font-weight:bold;'});

                //睡眠
                setTimeout(function () {
                    // window.location.reload();   //刷新浏览器
                    top.location.reload();   //刷新页面
                }, 2000);

            },
            contentType: false,  //必须false才会自动加上正确的Content-Type
            processData: false,  //必须false才会避开jQuery对 formdata 的默认处理
            error:function (xhr, status, info){
                $('#tishi').attr('class','alert alert-danger');
                $('#tishi').text('遗憾上传出错了')
            }
        });
    }

    //上传进度回调函数：
    function progressHandlingFunction(e) {
        if (e.lengthComputable) {
            var percent = e.loaded / e.total * 100;
            var bfbi = percent.toFixed(2) + "%";
            $('#prog').attr("style", 'width:' + bfbi); //更新数据到进度条
            $('#prog').html(bfbi);
            // $('#daxiao3').html(e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%");
        }
    }

    //当上传框关闭后触发
    $('#myModal').on('hide.bs.modal', function () {
        //当模态框关闭是清空表单和参数
        $('#yuan_shi').text('');
        $('#n_id').val('');
        $('#app').val('');
        $('#models_biao').val('');
        $('#file').val('');
        $('#daxiao').text('');
        $('#daxiao2').text('');
        $('#jdt').hide();
        $('#prog').attr("style", {'width': 0}); //更新数据到进度条
        $('#prog').html(0);
        $('#tishi').attr('class','alert alert-success');
        $('#ziduan').val('');
    });

});

最终效果

补充：adminx.py 注册管理器，接收每次后台提交的请求，进行逻辑处理

# 录音作品
class app_zuopinAdmin(object):

    # 设置xadmin后台显示字段
    list_display = ['id', 'title', 'psrc', 'lu_yin_shang_chuan', 'yangsrc', 'yamg_yin_shit', 'shen_chen_yang_yin']

    # 设置xadmin后台搜索字段，注意：搜索字段如果有时间类型会报错
    search_fields = ['id', 'title', 'des', 'key', 'psrc']

    # # 设置xadmin后台过滤器帅选字段，时间用过滤器来做
    list_filter = ['title', 'des', 'key', 'xing_bie', 'yu_zhong', 'ti_cai', 'shi_jian']

    def post(self, request, *args, **kwargs):

        逻辑处理

        # 一定要这样返回，否则会出错
        return super(app_zuopinAdmin, self).post(request, *args, **kwargs)

# 管理器重写后重新注册
xadmin.site.register(Zuopin, app_zuopinAdmin)