1、すべてのタイプ、包括的なクリックイベントのソート
注：クリックイベントに改善の「イベントをクリックし、」基礎ジャンゴ07ショッピングモールプロジェクトで
market.html
// 仅全部类型、综合排序部分
<section>
<nav>
<ul>
<li id="all_types">
<div></div>
<span>全部分类<span class="glyphicon glyphicon-chevron-down"></span></span>
</li>
<li id="sort_rule">
<div></div>
<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.isc }}</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 id="all_cer">
<div>
{% for f_l in f_list_list %}
{% if childcid == f_l.1 %}
<a href="{% url 'axf:market_with_params' typeid=typeid childcid=f_l.1 order_rule=0 %}">
<button class="btn btn-success">{{ f_l.0 }}</button>
</a>
{% else %}
<a href="{% url 'axf:market_with_params' typeid=typeid childcid=f_l.1 order_rule=0 %}">
<button class="btn btn-default">{{ f_l.0 }}</button>
</a>
{% endif %}
{% endfor %}
</div>
</div>
<div id="sort_cer">
<div>
{% for rule in order_rule_list %}
{% ifequal order_rule_view rule.1 %}
<a href="{% url 'axf:market_with_params' typeid=typeid childcid=childcid order_rule=rule.1 %}">
<button class="btn btn-success">{{ rule.0 }}</button>
</a>
{% else %}
<a href="{% url 'axf:market_with_params' typeid=typeid childcid=childcid order_rule=rule.1 %}">
<button class="btn btn-default">{{ rule.0 }}</button>
</a>
{% endifequal %}
{% endfor %}
</div>
</div>
</menu>
</section>
market.js
// market.css目前所有代码
// 点击事件的绑定
$(function () {
// 展示：全部类型，并收起：综合排序
the_slideDown("#all_types", "#all_cer", "#sort_rule", "#sort_cer");
// 收起：全部类型
the_slideUp("#all_types", "#all_cer",);
// 展示：综合排序，并收起：全部类型
the_slideDown("#sort_rule", "#sort_cer", "#all_types", "#all_cer");
// 收起：综合排序
the_slideUp("#sort_rule", "#sort_cer",);
})
// the_text:当前点击的文字 the_shade:当前阴影
// 展示
function the_slideDown(the_text, the_shade, other_text, other_shade) {
$(the_text).click(function () {
// 点击文字，显示阴影
var $the_shade = $(the_shade);
$the_shade.slideDown();
the_chevron(the_text, "glyphicon-chevron-down", "glyphicon-chevron-up");
var $other_shade = $(other_shade);
$other_shade.slideUp();
the_chevron(other_text, "glyphicon-chevron-up", "glyphicon-chevron-down");
})
}
// 收起
function the_slideUp(the_text, the_shade) {
$(the_shade).click(function () {
// 点击阴影，收回阴影
var $the_shade = $(the_shade);
$the_shade.slideUp();
the_chevron(the_text, "glyphicon-chevron-up", "glyphicon-chevron-down");
})
}
// 改变V形符号，向上向下
function the_chevron(the_text, the_rem, the_add) {
var $the_text = $(the_text);
var $span = $the_text.find("span").find("span");
$span.removeClass(the_rem).addClass(the_add);
}
アクセス：
2、すべてのタイプのデータ連結、注文した包括的な問い合わせ
2.1、アプリケーション/ url.py
path('marketwithparams/(?P<typeid>\d+/?P<childcid>\d+)/(?P<order_rule>\d+/', views.market_with_paprams, name='market_with_params'),
2.2、market.html
// 仅全部类型、综合排序部分
<section>
<nav>
<ul>
<li id="all_types">
<div></div>
<span>全部分类<span class="glyphicon glyphicon-chevron-down"></span></span>
</li>
<li id="sort_rule">
<div></div>
<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.isc }}</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 id="all_cer">
<div>
{% for f_l in f_list_list %}
{% if childcid == f_l.1 %}
<a href="{% url 'axf:market_with_params' typeid=typeid childcid=f_l.1 order_rule=0 %}">
<button class="btn btn-success">{{ f_l.0 }}</button>
</a>
{% else %}
<a href="{% url 'axf:market_with_params' typeid=typeid childcid=f_l.1 order_rule=0 %}">
<button class="btn btn-default">{{ f_l.0 }}</button>
</a>
{% endif %}
{% endfor %}
</div>
</div>
<div id="sort_cer">
<div>
{% for rule in order_rule_list %}
{% ifequal order_rule_view rule.1 %}
<a href="{% url 'axf:market_with_params' typeid=typeid childcid=childcid order_rule=rule.1 %}">
<button class="btn btn-success">{{ rule.0 }}</button>
</a>
{% else %}
<a href="{% url 'axf:market_with_params' typeid=typeid childcid=childcid order_rule=rule.1 %}">
<button class="btn btn-default">{{ rule.0 }}</button>
</a>
{% endifequal %}
{% endfor %}
</div>
</div>
</menu>
</section>
部品のすべての種類：
包括的なランキングセクション：
2.3、views.py表示します。
2.3.1、静的変数
2.3.2、ビュー：
# 仅目前market部分全部代码
def market(request):
return redirect(reverse('axf:market_with_params', kwargs={
"typeid": 1001,
"childcid": 0,
"order_rule": 0,
}))
def market_with_paprams(request, typeid, childcid, order_rule):
foodtypes = FoodType.objects.all()
goods_list = Goods.objects.filter(categoryid=typeid)
if childcid == ALL_TPYE:
pass
else:
goods_list = goods_list.filter(childcid=childcid)
if order_rule == ORDER_TOTAL:
pass
elif order_rule == ORDER_PRICE_UP:
goods_list = goods_list.order_by("price")
elif order_rule == ORDER_PRICE_DOWN:
goods_list = goods_list.order_by("-price")
elif order_rule == ORDER_SALE_UP:
goods_list = goods_list.order_by("productnum")
elif order_rule == ORDER_SALE_DOWN:
goods_list = goods_list.order_by("-productnum")
foodtype = foodtypes.get(typeid=typeid)
"""
全部分类：0#进口水果：1001#国产水果：1002
切割#： [全部分类：0 ，进口水果：1001 ， 国产水果：1002]
切割：。。。。。
"""
foodtypechildnames = foodtype.childtypenames
f_list = foodtypechildnames.split("#")
f_list_list = []
for f in f_list:
f_list_list.append(f.split("："))
order_rule_list = [
['综合排序', ORDER_TOTAL],
['价格升序', ORDER_PRICE_UP],
['价格降序', ORDER_PRICE_DOWN],
['销量升序', ORDER_SALE_UP],
['销量降序', ORDER_SALE_DOWN],
]
data = {
"title": "商城",
"foodtypes": foodtypes,
"goods_list": goods_list,
"typeid": int(typeid),
"f_list_list": f_list_list,
"childcid": childcid,
"order_rule_list": order_rule_list,
"order_rule_view":order_rule,
}
return render(request, 'main/market.html', context=data)
2.3.3、デフォルトのデータ転送：
2.3.4、サブタイプまたはソートデータ転送をクリックします。
2.3.5、切削データ：
フロントエンドに送信2.3.6、
