django 按钮的样式_【实战演练】Python+Django网站开发系列11-成绩查询与成绩录入...

#本文欢迎转载，转载请注明出处和作者

终于做到最后一步了，选课、删除、已选展示、修改密码等功能都已经完成，剩下查询已选课程的成绩（学生界面）与成绩录入（老师界面）。其中成绩查询的页面与之前做过的基本上是一样的，一个ORM命令就搞定。成绩录入这边，我们需要引入弹层jquery插件，帮助我们快速完成。

1、成绩查询

1.1后台查询业务逻辑

编辑views.py里面的queryscore函数，需要做个简单的连接查询：

def queryscore(request):
    username = request.session['username']
    score = student.objects.filter(username=username).values('score__cno', 'score__cno__cname',
                                                                 'score__cscore')
    return render_to_response('queryscore.html',locals())

1.2前端页面展示

前端querscore.html增加表格，获取后台推送的数据并且展示，可以参考前面的代码。

{% extends 'BASE02.html' %}

{% block content %}
    <table class="table table-bordered">
        <thead>
        <tr>
            <th style="width: 7%">课程ID</th>
            <th style="width:20%;">课程名</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tbody>
        {% for i in score %}
            <tr>
                <td>{{ i.score__cno }}</td>
                <td>{{ i.score__cno__cname }}</td>
                <td>{{ i.score__cscore }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endblock %}

最终效果如下：

2、成绩录入

最后一个功能了，也是最麻烦的功能。

2.1后台业务逻辑编写V1.0

首先在编辑成绩之前，需要展示成绩，而且内容是跨表的，需要进行数据库跨表查询。

def editscore(request):
    username = request.session['username']
    scored = teacher.objects.filter(username_id=username).values('course__cno', 'course__cname','course__score__sno',
                                                                 'course__score__sno','course__score__sno_id__username',
                                                                 'course__score__sno_id__sdept','course__score__cscore')
    return render_to_response('editscore.html', locals())

然后把数据返回给前端，跨表关联查询这里是个难点，可以参考之前的文章说明以及第10篇的第3部分实例：

繁星亮与鲍包包：【实战演练】Python+Django网站开发系列06-django数据库创建与使用​zhuanlan.zhihu.com

繁星亮与鲍包包：​zhuanlan.zhihu.com

2.2HTML页面编写

可以复用上面的成绩查询页面代码，增加一列，加上按钮编辑成绩。点击按钮后调用js函数。

{% extends 'BASE03.html' %}

{% block content %}
    <table class="table table-bordered">
        <thead>
        <tr>
            <th style="width:10%;">课程ID</th>
            <th style="width:16%;">课程名</th>
            <th style="width:16%;">学号</th>
            <th style="width:16%;">姓名</th>
            <th style="width:16%;">班级</th>
            <th style="width:16%;">成绩</th>
            <th style="width:10%;">操作</th>
        </tr>
        </thead>
        <tbody>
        {% for i in scored %}
            <tr>
                <td>{{ i.course__cno }}</td>
                <td>{{ i.course__cname }}</td>
                <td>{{ i.course__score__sno }}</td>
                <td>{{ i.course__score__sno_id__username }}</td>
                <td>{{ i.course__score__sno_id__sdept }}</td>
                <td>{{ i.course__score__cscore }}</td>
                <td>
                    <button class="btn btn-xs btn-warning" title="编辑">
                        <i class="glyphicon glyphicon-edit"></i>
                    </button>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endblock %}

2.3JS函数编写

需要增加修改成绩的js函数，命名为editscore。这里又是另外一个难点，需要增加jquery弹层组件。

注意出代码复制外，还需要增加CSS与JS文件的引用，把中间核心代码部分拷贝到新建的editscore函数里面。

另外由于要编辑成绩，通过cno（课程号）与sno（学号）可以确定唯一的成绩，因此，需要作为editscore的参数输入进来。

另外由于js需要在弹层显示当前的cscore（成绩），所以也要作为editscore的输入。

function editscore(cno,sno,cscore){
    var d = dialog({
            width: 260,
            title: '成绩录入',
            quickClose: true,
            content: '欢迎使用 artDialog 对话框组件！',
            ok: function() {
                console.log(this)
                // do something
            },
            cancelValue: '取消',
            cancel: function() {
                console.log(this)
                // do something
            },
            onshow: function() {
                console.log(this)
                // do something
            }
        });
        d.show();
}

绑定按钮就行测试。

<button class="btn btn-xs btn-warning" title="编辑" onclick="editscore('{{ i.course__cno }}','{{ i.course__score__sno }}',
                            '{{ i.course__score__cscore }}',)">

点击按钮会出现如下效果。

然后开始修改editscore函数样式。

width是弹层的宽度，title是弹层的标题。

content里面可以放表单，输入框等，由于我们只能修改成绩，所以只需要一个<input>标签用来修改成绩。

ok：后面的编写点击“OK”按钮之后，执行的内容，可以在里面写.post请求推送数据到后台。

最特别是onshow：可以通过javascript变量，将现有的值赋予到<input>文本框内显示。

修改如下：

function editscore(cno, sno, cscore) {
    var d = dialog({
        width: 360,
        title: '成绩录入',
        quickClose: true,
        content: '<label class="col-sm-3 control-label bk-lh30 pt0">成绩：</label>n' +
            '<div class="col-sm-9">n' +
            '<input type="text" class="form-control bk-valign-top" id="scored" placeholder="">' +
            '</div>',
        ok: function () {
            $.post('/editscore/', {
                'cno': cno,
                'sno': sno,
                'cscore': $('#scored').val(),
            }, function (res) {
                if (res.result == 'True') {
                    alert("修改成功");
                    window.location.reload();
                } else {
                    alert("修改失败");
                    window.location.reload();
                }
            }, 'json')
        },
        cancelValue: '取消',
        cancel: function () {
            console.log(this)
            // do something
        },
        onshow: function () {
            $('#scored').val(cscore);
        }
    });
    d.show();
}

其中onshow下面的$('#scored').val(cscore)，就是把当前的成绩数据，赋值给id为scored的<input>标签内显示。

ok里面，通过post向后台返回数据与从后台获取数据。

2.4后台业务逻辑编写V2.0

再次修改后台业务逻辑，增加request.POST从前台获取数据，并且通过update进行数据更新。

def editscore(request):
    if request.method == 'POST' and request.POST:
        cno = request.POST['cno']
        sno = request.POST['sno']
        cscore = request.POST['cscore']
        print (cscore)
        score.objects.filter(cno_id=cno,sno_id=sno).update(cscore=cscore)
        result = 'True'
        return JsonResponse({'result': result})
    username = request.session['username']
    scored = teacher.objects.filter(username_id=username).values('course__cno', 'course__cname','course__score__sno',
                                                                 'course__score__sno','course__score__sno_id__username',
                                                                 'course__score__sno_id__sdept','course__score__cscore')
    return render_to_response('editscore.html', locals())

最终效果如下：点击修改按钮，弹层自动已经加载当前成绩。

修改成绩，然后点击“OK”按钮。

修改成功后，自动弹出提示“修改成功”，然后页面自动刷新，显示的成绩是已修改的成绩。

至此，所有的功能开发完成。