Django 08 shopping mall projects (all types and integrated ordering: click event, cascade data query)

1, all types, sort of comprehensive click event

Note: In the "click event" basis Django 07 shopping mall project on the click event improved
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);
}

access:

2, data concatenation of all types, comprehensive inquiry ordered

2.1 、App/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>

All types of parts:

a comprehensive ranking section:

2.3, view views.py:

2.3.1, static variables

2.3.2, views:

# 仅目前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, the default data transfer:

2.3.4, click the subtype or sort data transfer:

2.3.5, cutting data:

2.3.6, transmitted to the front end