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