我的代码中有两个div。左div具有类别名称,右div具有类别名称,标题和描述。正确的div值来自DB。
我基本上尝试在单击左侧的类别时在python / django中构建复选框过滤器功能,右侧div显示所选信息的所选类别。默认情况下,它会显示所有类别和所有详细信息。
以下是我的代码:
HTML文件
<div class="category_table">
<form action="" method="post">
<input class="reset" type="button" onclick='UnSelectAll(this);' value="Reset" />
<ul class="vertical menu">
{% for category in Categories %}
{% if 'Sr' in category.label_name %}
<li>
<input type="checkbox" name="checkbox1" id={{category.id}} >
<span class="label sr">{{category.label_name}}</span>
<span class="category_name">{{category.name}}</span>
</li>
{% elif 'At' in category.label_name %}
<li>
<input type="checkbox" name="checkbox1" id="{{category.id}}">
<span class="label at">{{category.label_name}}</span>
<span class="category_name">{{category.name}}</span>
</li>
{% elif 'Inter' in category.label_name %}
<li>
<input type="checkbox" name="checkbox1" id="{{category.id}}">
<span class="label inter">{{category.label_name}}</span>
<span class="category_name">{{category.name}}</span>
</li>
{% elif 'TRN' in category.label_name %}
<li>
<input type="checkbox" name="checkbox1" id="{{category.id}}">
<span class="label trn">{{category.label_name}}</span>
<span class="category_name">{{category.name}}</span>
</li>
{% elif 'OTP' in category.label_name %}
<li>
<input type="checkbox" name="checkbox1" id="{{category.id}}">
<span class="label otp">{{category.label_name}}</span>
<span class="category_name">{{category.name}}</span>
</li>
{% elif 'FIE' in category.label_name %}
<li>
<input type="checkbox" name="checkbox1" id="{{category.id}}">
<span class="label fie">{{category.label_name}}</span>
<span class="category_name">{{category.name}}</span>
</li>
{% elif 'DEL' in category.label_name %}
<li>
<input type="checkbox" name="checkbox1" id="{{category.id}}">
<span class="label del">{{category.label_name}}</span>
<span class="category_name">{{category.name}}</span>
</li>
{% endif %}
{% endfor %}
</ul>
</form>
</div>
<!-- END SIDEBAR -->
<!-- MAIN-CONTENT -->
<div class="small-8 cell main-content">
{% for model in Data %}
<div class="callout medium">
<p class="entry_name">{{model.name}}</p>
<p class="entry_info">{{model.sub_name}}<a target="_blank" href=""></a>
{% if "At" in model.label_name %}
<span class="label atm">{{model.label_name}}</span>
{% elif "Sr" in model.label_name %}
<span class="label star">{{model.label_name}}</span>
{% elif "OTP" in model.label_name %}
<span class="label obs">{{model.label_name}}</span>
{% elif "DEL" in model.label_name %}
<span class="label calc">{{model.label_name}}</span>
{% endif %}
</p>
<p class="entry_description">
{{model.description}}
</p>
<div class="text-right">
{% if "Ats" in model.name %}
<a class="hollow button" href={{model.about_link}} target="_blank">{{model.link1_name}}</a>
<a class="hollow button success hide-for-small-only" href={{model.install_link}} target="_blank">{{model.link2_name}}</a>
<a class="hollow button secondary" href="javascript:void()" target="_blank">{{model.link3_name}}</a>
{% elif "CC" in model.name %}
<a class="hollow button" href={{model.about_link}} target="_blank">{{model.link1_name}}</a>
<a class="hollow button alert" href={{model.launch_link}} target="_blank">{{model.link3_name}}</a>
{% elif "Plan" in model.name %}
<a class="hollow button" href={{model.about_link}} target="_blank">{{model.link1_name}}</a>
<a class="hollow button alert" href={{model.launch_link}} target="_blank">{{model.link3_name}}</a>
{% elif "Corr" in model.name %}
<a class="hollow button" href={{model.about_link}} target="_blank">{{model.link1_name}}</a>
<a class="hollow button success hide-for-small-only" href= {{model.install_link}} target="_blank">{{model.link2_name}}</a>
<a class="hollow button alert" href={{model.launch_link}} target="_blank">{{model.link3_name}}</a>
{% elif "RED" in model.name %}
<a class="hollow button alert" href={{model.launch_link}} target="_blank">{{model.link3_name}}</a>
{% elif "Penr" in model.name %}
<a class="hollow button" href={{model.about_link}} target="_blank">{{model.link1_name}}</a>
<a class="hollow button success hide-for-small-only" href= {{model.install_link}} target="_blank">{{model.link2_name}}</a>
<a class="hollow button alert" href={{model.launch_link}} target="_blank">{{model.link3_name}}</a>
{% endif %}
</div>
</div>
{% endfor %}
</div>
VIEWS.py文件
from django.http import HttpResponse
from django.shortcuts import render
from abcd.models import Categories, Data
# Create your views here.
def homepage(request):
category = Categories.objects.all()
model= Data.objects.all()
return render(request,'index.html', {'Data':model,'Categories':category})
from django.db import models
class Categories(models.Model):
id = models.IntegerField(primary_key=True)
name = models.CharField(max_length = 50, null=True)
label_name = models.CharField(max_length = 30)
class Data(models.Model):
name = models.CharField(max_length = 50)
sub_name = models.CharField(max_length = 30)
description = models.TextField(max_length = 500)
label_name = models.CharField(max_length = 30)
link1_name = models.CharField(max_length = 30, blank=True)
about_link = models.URLField(max_length=500, blank=True)
link2_name = models.CharField(max_length = 30, blank=True)
install_link = models.URLField(max_length=500, blank=True)
link3_name = models.CharField(max_length = 30, blank=True)
install_link = models.URLField(max_length=500, blank=True)
categories = models.ForeignKey(Categories, on_delete=models.CASCADE)