一级数据级联
左侧分类栏实现
目标
我们要完成点击左侧的食品分类，左边食品栏自动筛选出对应的食品，实际上就是根据左边物品栏的标识，让右侧进行筛选。
实现思路
实现思路就是左边分类的标识，和右边食物的一个属性进行匹配，将对应的食物通过视图展示出来。
将foodtype表中的typeid和goods表中的categoryid进行对应。
实现
1.0版本首先实现可以通过url参数携带categoryid来查看对应的ID.
我们在views中进行增量式操作将原先的market函数修改成market_with_params:
def market(request): # 原先旧的视图函数改成重定向至新的视图，并且携带默认参数访问
return redirect(reverse('axf:market_with_params', kwargs={
'typeid': 104749
}))
def market_with_params(request, typeid): # 选购加参数的函数
foodtypes = FoodType.objects.all()
goods_list = Goods.objects.filter(categoryid=typeid) # 根据传递的id去数据库查找对应的商品信息
data = {
'title': '闪购',
'foodtypes': foodtypes,
'goods_list': goods_list,
}
return render(request, 'main/market.html', context=data)urls中添加：
url(r'^marketwithparams/(?P<typeid>\d+)/', views.market_with_params(), name='market_with_params'),测试：
我们实现了可以在url中指定食品类别参数从而查询到对应的食物。
接下来我们要实现点击左边，实现右边的自动改变。
只需要让我们左边的点击事件生效，修改market.html:
将第6行中的链接添加进去即可。
{# 左边的大类型导航 #}
<aside>
<ul>
{% for foodtype in foodtypes %}
<li>
<a href="{% url 'peiqi1:market_with_params' typeid=foodtype.typeid %}">
{{ foodtype.typename }}
</a>
{# <span class="yellowSlide"></span>#}
</li>
{% endfor %}
</ul>
</aside>美化网页
为选中分类添加选中特效
views中添加：
def market_with_params(request, typeid): # 选购加参数的函数
foodtypes = FoodType.objects.all()
goods_list = Goods.objects.filter(categoryid=typeid) # 根据传递的id去数据库查找对应的商品信息
data = {
'title': '闪购',
'foodtypes': foodtypes,
'goods_list': goods_list,
'typeid': int(typeid), # 这里转换格式的目的是，在market.html中使用ifequal时相等的条件为：两个参数需要数值和数据类型都相等，而从url传入时，typeid会变成字符串的格式，而foodtype.typeid是数字类型
}
return render(request, 'main/market.html', context=data)57行 这里转换格式的目的是，在market.html中使用ifequal时相等的条件为：两个参数需要数值和数据类型都相等，而从url传入时，typeid会变成字符串的格式，而foodtype.typeid是数字类型。
market.html中：
<aside>
<ul>
{% for foodtype in foodtypes %}
<li>
<a href="{% url 'peiqi1:market_with_params' typeid=foodtype.typeid %}">
{{ foodtype.typename }}
</a>
{% ifequal foodtype.typeid typeid %} {# 如果分类栏对应的typeid等于url中传入的typeid，就有特效 #}
<span class="yellowSlide"></span>
{% endifequal %}
</li>
{% endfor %}
</ul>
</aside>8-10行添加一个判断，如果分类栏对应的typeid等于url中传入的typeid，就有特效。
添加购物车按钮
market.css中相关代码：
/*
添加到购物车
*/
li > section {
position: absolute;
right: 0.4rem;
bottom: 0.4rem;
height: 0.75rem;
border-radius: 1rem;
}
section > button {
background: white;
border: 1px solid orange;
border-radius: 1111px;
color: red;
display: inline-block;
text-align: center;
line-height: 0.4rem;
font-weight: 900;
width: 0.5rem;
height: 0.5rem;
font-size: 0.3rem;
}
li > section > span {
display: inline-block;
width: 0.4rem;
text-align: center;
line-height: 0.4rem;
}
.subShopping {
font-size: 0.8rem;
font-weight: 100;
}上方全部分类实现
这里我们要达到点击全部分类，会出现一个栏显示子类。
点击时弹框框，这里用到了js。
我们给全部分类这个标签添加一个类选择器:
markert.html中：
<li id="all_types"><span>全部分类<span class="glyphicon glyphicon-chevron-down"></span></span></li>然后我们要给这个标签添加js，先创建market.js文件：
然后在market.html中导入js文件：
{% block ext_js %}
{{ block.super }}
<script type="text/javascript" src="{% static 'peiqi1/main/js/market.js' %}"></script>
{% endblock %}
接着在market.js中点击事件的绑定：
注意，在我们跨语言编程的时候，从python到可视化界面的语言，当我们点击一个地方触发效果时我们需要确保真的点击到了该标签，验证方法是通过打印日志或者某种方式来检查，这里我们用简单的打印来测试是否点中标签。
$(function () {
$('#all_types').click(function(){
console.log('全部类型');
})
})测试点击：
这里我们点击全部分类，可以观察到右侧的全部分类的计数增加，也就是说我们是可以点中的。
接下来我们要完成点击全部分类标签弹出框框，其实这个框框自始至终都是存在的，只不过平时都是隐藏的，当我们点击全部分类这个按钮时变成显示的。
market.css全部分类，综合排序的样式：
/*
全部分类
*/
section menu > div {
position: fixed;
top: 2.7rem;
left: 2.55rem;
width: 7.45rem;
height: 100%;
background: rgba(0, 0, 0, 0.5);
color: grey;
}
section menu > div > div {
background: white;
padding-bottom: 0.3rem;
}
section menu > div > div > a > span {
border: 0.04rem solid #e0e0e0;
padding: 0.1rem 0.2rem;
margin-left: 0.3rem;
border-radius: 0.2rem;
font-size: 0.375rem;
display: inline-block;
margin-top: 0.3rem;
}market.html:
<section>
<nav>
<ul>
<li id="all_types"><span>全部分类<span class="glyphicon glyphicon-chevron-down"></span></span></li>
<li><span>综合排序<span class="glyphicon glyphicon-chevron-down"></span></span></li>
</ul>
</nav>
<menu>
<ul>
{% for goods in goods_list %}
<li>
<a href="#">
<img src="{{ goods.productimg }}" alt="{{ goods.productlongname }}">
<div class="shoppingInfo">
<h6>{{ goods.productlongname }}</h6>
<p class="detailTag">
<span>精选</span>
<span></span>
</p>
<p class="unit">{{ goods.specifics }}</p>
<p class="price">
<span>{{ goods.price }}</span>
<s>{{ goods.marketprice }}</s>
</p>
</div>
</a>
<section>
<button>—</button>
<span>0</span>
<button>+</button>
</section>
</li>
{% endfor %}
</ul>
<div>
<div>
<a href="#">
<span>全部分类</span>
</a>
<a href="#">
<span>牛奶面包</span>
</a>
</div>
</div>
</menu>
</section>（35-43行）
测试页面：
下面我们要将框框隐藏起来，只有点击全部分类时才会显示：
首先market.css：(第九行添加了一个隐藏)
section menu > div {
position: fixed;
top: 2.7rem;
left: 2.55rem;
width: 7.45rem;
height: 100%;
background: rgba(0, 0, 0, 0.5);
color: grey;
display:none;
}在market.html中g给标签添加容器id：
<div id="all_types_container">
<div>
<a href="#">
<span>全部分类</span>
</a>
<a href="#">
<span>牛奶面包</span>
</a>
</div>
</div>market.js中：
$(function () {
$('#all_types').click(function(){
console.log('全部类型');
var $all_types_container = $('#all_types_container'); /* 找到all_types_container的div标签 */
$all_types_container.show() /* 显示 */
})
})这样我们就可以点击全部分类就能冒出框框了
下面我们美化框框，首先将框框里面的选项改成button标签:
market.html
<div>
<a href="#">
<button class="btn btn-success">全部分类</button>
</a>
<a href="#">
<button class="btn btn-default">综合排序</button>
</a>
</div>market.css也接着修改:
section menu > div > div > a > button测试：
上方综合排序实现
我们给综合排序这个标签添加一个类选择器:
markert.html中：
<li id="sort_rule"><span>综合排序<span class="glyphicon glyphicon-chevron-down"></span></span></li>js中添加点击事件：
$('#sort_rule').click(function(){
console.log('排序规则');
var $sort_rule_container = $("#sort_rule_container");
$sort_rule_container.slideDown() /* 下弹特效显示 */
})
})
此处评论已关闭