#本文歡迎轉載，轉載請注明出處和作者

終于做到最后一步了，選課、刪除、已選展示、修改密碼等功能都已經完成，剩下查詢已選課程的成績（學生界面）與成績錄入（老師界面）。其中成績查詢的頁面與之前做過的基本上是一樣的，一個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”按鈕。

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

至此，所有的功能開發完成。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。