urls設計
設計url接收兩個參數 一個id整數類型參數 一個provname表示字符串參數
urlpatterns = [ path('monitorquery/show/<int:id>/<str:provname>', monitorqueryView.MonitorqueryshowView.as_view(), name='monitorqueryshow') ]
urlpatterns = [ url(r'^monitor/', include('monitor.urls')), ]
Views設計
class MonitorqueryshowView(LoginRequiredMixin, View): def get(self,request,id,provname): print (id) print(provname) temp_name = "service/service-header.html" return render(request,'monitor/monitorquery_show.html',locals())
js設計
function showallprostates(btn) { htmlstr=""; problemIndex=[]; //存儲的是provstatus不為0元素的索引 problemArr=[]; //存儲的是prostatus不為0的元素內容 problemprovs=[]; //存儲異常的省份名稱 btnvalue=$(btn).val(); if(btnvalue=="僅顯示異常數據") { $(btn).val("顯示全部數據"); for(var i=0;i<provstatus.length;i++) { if(provstatus[i]!=0) { problemIndex.push(i); problemArr.push(provstatus[i]); } } for(var t=0;t<problemIndex.length;t++) { problemprovs.push(provs[problemIndex[t]]); } tmpprovs=problemprovs; tmpprovstatus=problemArr; } else { $(btn).val("僅顯示異常數據"); tmpprovs=provs; tmpprovstatus=provstatus; } for(var i=0;i<tmpprovs.length;i++) { imghtml=""; if (tmpprovstatus[i]==0) { imghtml="<img src=\"/static/dist/img/u134.png\" />"; } else if (tmpprovstatus[i]==1) { imghtml="<img src=\"/static/dist/img/u180.png\" />"; } else if(tmpprovstatus[i]==2) { imghtml="<img src=\"/static/dist/img/u169.png\" />"; } else { imghtml="<img src=\"/static/dist/img/u185.png\" />"; } provname=provs[i]; htmlstr+="<div class=\"fa-hover col-md-3 col-sm-4 col-xs-12\"><a href=\"{% url 'monitorqueryshow' 10 '北京' %}\">"+imghtml+" "+provname+"</a></div>"; } document.getElementById("provlist").innerHTML=htmlstr; }
function showallprostates(btn) { htmlstr=""; problemIndex=[]; //存儲的是provstatus不為0元素的索引 problemArr=[]; //存儲的是prostatus不為0的元素內容 problemprovs=[]; //存儲異常的省份名稱 btnvalue=$(btn).val(); if(btnvalue=="僅顯示異常數據") { $(btn).val("顯示全部數據"); for(var i=0;i<provstatus.length;i++) { if(provstatus[i]!=0) { problemIndex.push(i); problemArr.push(provstatus[i]); } } for(var t=0;t<problemIndex.length;t++) { problemprovs.push(provs[problemIndex[t]]); } tmpprovs=problemprovs; tmpprovstatus=problemArr; } else { $(btn).val("僅顯示異常數據"); tmpprovs=provs; tmpprovstatus=provstatus; } for(var i=0;i<tmpprovs.length;i++) { imghtml=""; if (tmpprovstatus[i]==0) { imghtml="<img src=\"/static/dist/img/u134.png\" />"; } else if (tmpprovstatus[i]==1) { imghtml="<img src=\"/static/dist/img/u180.png\" />"; } else if(tmpprovstatus[i]==2) { imghtml="<img src=\"/static/dist/img/u169.png\" />"; } else { imghtml="<img src=\"/static/dist/img/u185.png\" />"; } provname=provs[i]; htmlstr+="<div class='fa-hover col-md-3 col-sm-4 col-xs-12'><a href='/monitor/monitorquery/show/"+i+"/"+provname+"'>"+imghtml+" "+provname+"</a></div>"; } document.getElementById("provlist").innerHTML=htmlstr; }
UI實現
class MonitorqueryshowView(LoginRequiredMixin, View): def get(self,request,id,provname): prov=provname temp_name = "service/service-header.html" return render(request,'monitor/monitorquery_show.html',locals())
<h3 style="margin:5px 10px;display:inline-block">{{ prov }}</h3>
腳本中導入django項目進行調試
django實現前后台數據傳遞
status=[{'a':'b'},{'c':'d'}];
res=locals()
res["data"]=status
return render(request, 'monitor/monitorquery_list.html',res)
function init() { showhide(2); showallprostates("all"); var res = {{ data|safe }}; console.log(res); }
django實現給已經存在的url動態傳遞參數
path('status/list/', servicestatus.ServiceStatusView.as_view(), name='svstatus_list')
class ServiceStatusView (LoginRequiredMixin, View): def get(self, request): temp_name = "service/service-header.html" display_control = None service_cm_type = SERVICE_CM_TYPE # all_servicestatus = ServiceStatus.objects.all().order_by ("-id") servicename=request.GET.get('servicename', 'all') #無需在urls.py中進行任何參數匹配 可以直接按照參數名稱接收 if servicename =="all": all_servicestatus = ServiceStatus.objects.all().order_by("-id") else: all_servicestatus = ServiceStatus.objects.filter(service_cm_type=servicename).order_by("-id") return render(request, 'service/service_status.html',locals())
function filterServices(select) { var filtervalue=$(select).val(); window.location.href="/service/status/list/?servicename="+filtervalue; } html代碼 <select style="width: 100px;" id="svselect" name="svselect" class="form-control m-b input-sm" onchange="filterServices(this)"> <option value="all">選擇服務類型</option> {% for svtype in service_cm_type %} <option value="{{svtype.0}}">{{svtype.1}}</option> {% endfor %} </select>
實現傳遞url動態參數激活不同的Tab頁面
path('war/add/<str:tab>', war.war_add, name='war_add'),
def war_add(request,tab): if request.POST: return HttpResponseRedirect(reverse("war")) else: temp_name = "cmdb/cmdb-header.html" tabname=tab return render(request, "deploycm/war_add.html", locals())
<a href="{% url 'war_add' '1'%}"><li style="font-size: 13px;" class="btn btn-sm bg-teal" ><b>上傳1</b></li></a> <a style="font-size: 10px;" href="{% url 'war_add' '2'%}" class="btn btn-xs bg-purple">單傳此包</a>
<script> window.onload=init; function init() { setactiveTab(); } function setactiveTab() { var tab=$("#hd_tab").val(); if(tab == 1) { $("#li_wars").addClass("active"); $("#tab_wars").addClass(" in active"); } else { $("#li_war").addClass("active"); $("#tab_war").addClass(" in active"); } } </script> html <input type="hidden" id="hd_tab" value="{{ tabname }}" /> python def war_add(request,tab): if request.POST: return HttpResponseRedirect(reverse("war")) else: temp_name = "cmdb/cmdb-header.html" tabname=tab return render(request, "deploycm/war_add.html", locals())