#本文歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明出處和作者

終于做到最后一步了，選課、刪除、已選展示、修改密碼等功能都已經(jīng)完成，剩下查詢已選課程的成績（學(xué)生界面）與成績錄入（老師界面）。其中成績查詢的頁面與之前做過的基本上是一樣的，一個ORM命令就搞定。成績錄入這邊，我們需要引入彈層jquery插件，幫助我們快速完成。

1、成績查詢

1.1后臺查詢業(yè)務(wù)邏輯

編輯views.py里面的queryscore函數(shù)，需要做個簡單的連接查詢：

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增加表格，獲取后臺推送的數(shù)據(jù)并且展示，可以參考前面的代碼。

{% 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后臺業(yè)務(wù)邏輯編寫V1.0

首先在編輯成績之前，需要展示成績，而且內(nèi)容是跨表的，需要進(jìn)行數(shù)據(jù)庫跨表查詢。

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())

然后把數(shù)據(jù)返回給前端，跨表關(guān)聯(lián)查詢這里是個難點(diǎn)，可以參考之前的文章說明以及第10篇的第3部分實(shí)例：

繁星亮與鮑包包：【實(shí)戰(zhàn)演練】Python+Django網(wǎng)站開發(fā)系列06-django數(shù)據(jù)庫創(chuàng)建與使用?zhuanlan.zhihu.com繁星亮與鮑包包：?zhuanlan.zhihu.com

2.2HTML頁面編寫

可以復(fù)用上面的成績查詢頁面代碼，增加一列，加上按鈕編輯成績。點(diǎn)擊按鈕后調(diào)用js函數(shù)。

{% 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%;">學(xué)號</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函數(shù)編寫

需要增加修改成績的js函數(shù)，命名為editscore。這里又是另外一個難點(diǎn)，需要增加jquery彈層組件。

注意出代碼復(fù)制外，還需要增加CSS與JS文件的引用，把中間核心代碼部分拷貝到新建的editscore函數(shù)里面。

另外由于要編輯成績，通過cno（課程號）與sno（學(xué)號）可以確定唯一的成績，因此，需要作為editscore的參數(shù)輸入進(jìn)來。

另外由于js需要在彈層顯示當(dāng)前的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 }}',)">

點(diǎn)擊按鈕會出現(xiàn)如下效果。

然后開始修改editscore函數(shù)樣式。

width是彈層的寬度，title是彈層的標(biāo)題。

content里面可以放表單，輸入框等，由于我們只能修改成績，所以只需要一個<input>標(biāo)簽用來修改成績。

ok：后面的編寫點(diǎn)擊“OK”按鈕之后，執(zhí)行的內(nèi)容，可以在里面寫.post請求推送數(shù)據(jù)到后臺。

最特別是onshow：可以通過javascript變量，將現(xiàn)有的值賦予到<input>文本框內(nèi)顯示。

修改如下：

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)，就是把當(dāng)前的成績數(shù)據(jù)，賦值給id為scored的<input>標(biāo)簽內(nèi)顯示。

ok里面，通過post向后臺返回?cái)?shù)據(jù)與從后臺獲取數(shù)據(jù)。

2.4后臺業(yè)務(wù)邏輯編寫V2.0

再次修改后臺業(yè)務(wù)邏輯，增加request.POST從前臺獲取數(shù)據(jù)，并且通過update進(jìn)行數(shù)據(jù)更新。

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())

最終效果如下：點(diǎn)擊修改按鈕，彈層自動已經(jīng)加載當(dāng)前成績。

修改成績，然后點(diǎn)擊“OK”按鈕。

修改成功后，自動彈出提示“修改成功”，然后頁面自動刷新，顯示的成績是已修改的成績。

至此，所有的功能開發(fā)完成。

總結(jié)

以上是生活随笔為你收集整理的django 按钮的样式_【实战演练】Python+Django网站开发系列11-成绩查询与成绩录入...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。