全部分类菜单变实现

子分类功能实现

上一篇我们实现了全部分类，综合排序子菜单的样式实现，这一次我们实现他的实际功能。

我们为了取出对应的数据分类，


我们要取出这个属性，然后将里面的子分类提取出来。

views:

def market_with_params(request, typeid):  # 选购加参数的函数

    foodtypes = FoodType.objects.all()

    goods_list = Goods.objects.filter(categoryid=typeid)  # 根据传递的id去数据库查找对应的商品信息

    foodtype = foodtypes.get(typeid=typeid)  # 从foodtypes按照typeid的内容去提取出food_type

    """
        全部分类:0#进口水果:103534#国产水果:103533
        当我们点击全部分类按钮，会将对应的参数如103534，按照这个参数匹配出商品
        
        1.'#'号切割，变成一个列表：
            ['全部分类':0, '进口水果':103534, '国产水果':'103533']
        2.':'号切割
            [['全部分类, 0'], ['进口水果', 103534], ['国产水果', 103533]]
        
    """
    foodtypechildnames = foodtype.childtypenames

    foodtypechildname_list = foodtypechildnames.split('#')

    foodtype_childname_list = []

    for foodtype_childname in foodtypechildname_list:
        foodtype_childname_list.append(foodtype_childname.split(':'))


    data = {
        'title': '闪购',
        'foodtypes': foodtypes,
        'goods_list': goods_list,
        'typeid': int(typeid),
        'foodtype_childname_list': foodtype_childname_list,
    }
    return render(request, 'main/market.html', context=data)

market.html

            <div id="all_types_container">
                <div>
                    {% for foodtype_childname in foodtype_childname_list %}
                        <a href="#">
                            <button class="btn btn-success">{{ foodtype_childname.0 }}</button>
                        </a>

                    {% endfor %}

                </div>
            </div>

测试：

可以看到当点击左侧分类栏时，左侧的全部分类中可以筛选出对应的子分类。

子分类筛选具体商品的实现

下面我们实现点击子分类，可以查找出对应的具体商品。

views: 添加childcid参数,并且进行两次数据筛选（先筛选）

def market_with_params(request, typeid, childcid):  # 选购加参数的函数

    foodtypes = FoodType.objects.all()

    # 根据typeid和childcid去数据库查找对应的商品信息
    goods_list = Goods.objects.filter(categoryid=typeid)
    if childcid == ALL_TYPE:    # 当childcid为0时，说明是全部类型，也就是输出全部数据，不做筛选。
        pass
    else:
        goods_list=goods_list.filter(childcid=childcid)

    foodtype = foodtypes.get(typeid=typeid)  # 从foodtypes按照typeid的内容去提取出food_type

    """
        全部分类:0#进口水果:103534#国产水果:103533
        当我们点击全部分类按钮，会将对应的参数如103534，按照这个参数匹配出商品
        
        1.'#'号切割，变成一个列表：
            ['全部分类':0, '进口水果':103534, '国产水果':'103533']
        2.':'号切割
            [['全部分类, 0'], ['进口水果', 103534], ['国产水果', 103533]]
        
    """
    foodtypechildnames = foodtype.childtypenames

    foodtypechildname_list = foodtypechildnames.split('#')

    foodtype_childname_list = []

    for foodtype_childname in foodtypechildname_list:
        foodtype_childname_list.append(foodtype_childname.split(':'))


    data = {
        'title': '闪购',
        'foodtypes': foodtypes,
        'goods_list': goods_list,
        'typeid': int(typeid),
        'foodtype_childname_list': foodtype_childname_list,
    }
    return render(request, 'main/market.html', context=data)

urls:

url(r'^marketwithparams/(?P<typeid>\d+)/(?P<childcid>\d+)/', views.market_with_params, name='market_with_params'),

测试：

美化箭头图标

我们现在要将子分类框展开时的箭头指向上。

修改market.js：

$(function () {
    $('#all_types').click(function(){
        console.log('全部类型');

        var $all_types_container = $('#all_types_container'); /* 找到all_types_container的div标签 */

        $all_types_container.show();  /* 显示 */

        var $all_type = $(this);  /* 找到箭头的位置 */

        var $span = $all_type.find('span').find('span'); /* 取出箭头对应的class */

        $span.removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');


    })

测试：

收起子分类栏

market.js:

    $('#all_types_container').click(function () {
        var $all_type_container = $(this);

        $all_type_container.hide();

        var $all_type = $('#all_types');  /* 找到箭头的位置 */

        var $span = $all_type.find('span').find('span'); /* 取出箭头对应的class */

        $span.removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');

        })

美化选中特效

实现子分类栏中，只有选中元素呈现被选中特效，剩余的是为默认特效

实现方法和左侧分类栏的黄点类似，添加一个判断。

views首先传入childcid参数到模板中：

    data = {
        'title': '闪购',
        'foodtypes': foodtypes,
        'goods_list': goods_list,
        'typeid': int(typeid),
        'foodtype_childname_list': foodtype_childname_list,
        'childcid': childcid,
    }

market.html:添加判断

<div id="all_types_container">
    <div>
        {% for foodtype_childname in foodtype_childname_list %}

            {% ifequal foodtype_childname.1 childcid %} {# 如果是被选中的，就设置成选中成功特效 #}
                <a href="{% url 'peiqi1:market_with_params' typeid=typeid childcid=foodtype_childname.1 %}">
                    <button class="btn btn-success">{{ foodtype_childname.0 }}</button>
                </a>
                {% else %}  {# 如果不是被选中的，就设置成默认特效 #}
                <a href="{% url 'peiqi1:market_with_params' typeid=typeid childcid=foodtype_childname.1 %}">
                    <button class="btn btn-default">{{ foodtype_childname.0 }}</button>
                </a>
            {% endifequal %}


        {% endfor %}

    </div>
</div>

综合排序子菜单实现

综合排序的子菜单选项，实际上都是我们设置好的规则。

排序功能思路

前端与后端商议一个规则，如前端传回0，后端返回正序排列，前端传回1，后端传回倒序排列，等等。

在这之前，我们将排序的规则添加进一个新的文件中，而不是直接在views中判断等于0，1，2这类，提高代码的可阅读性。

新建文件:

urls:添加参数

url(r'^marketwithparams/(?P<typeid>\d+)/(?P<childcid>\d+)/(?P<order_rule>\d+)/', views.market_with_params, name='market_with_params'),

我们在views函数中添加order_rule参数，并且添加排序种类判断，以级排序功能
views:

def market(request):  # 原先旧的视图函数改成重定向至新的视图，并且携带默认参数访问
    return redirect(reverse('axf:market_with_params', kwargs={
        'typeid': 104749,
        'childcid': 0,
        'order_rule': 0,
    }))


def market_with_params(request, typeid, childcid, order_rule):  # 选购加参数的函数

    foodtypes = FoodType.objects.all()

    # 根据typeid和childcid去数据库查找对应的商品信息
    goods_list = Goods.objects.filter(categoryid=typeid)
    if childcid == ALL_TYPE:    # 当childcid为0时，说明是全部类型，也就是输出全部数据，不做筛选。
        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)  # 从foodtypes按照typeid的内容去提取出food_type

    """
        全部分类:0#进口水果:103534#国产水果:103533
        当我们点击全部分类按钮，会将对应的参数如103534，按照这个参数匹配出商品
        
        1.'#'号切割，变成一个列表：
            ['全部分类':0, '进口水果':103534, '国产水果':'103533']
        2.':'号切割
            [['全部分类, 0'], ['进口水果', 103534], ['国产水果', 103533]]
        
    """
    foodtypechildnames = foodtype.childtypenames

    foodtypechildname_list = foodtypechildnames.split('#')

    foodtype_childname_list = []

    for foodtype_childname in foodtypechildname_list:
        foodtype_childname_list.append(foodtype_childname.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),
        'foodtype_childname_list': foodtype_childname_list,
        'childcid': childcid,
        'order_rule_list': order_rule_list,
    }
    return render(request, 'main/market.html', context=data)

测试：

美化选中特效

在views中的data传入新参数：

    data = {
        'title': '闪购',
        'foodtypes': foodtypes,
        'goods_list': goods_list,
        'typeid': int(typeid),
        'foodtype_childname_list': foodtype_childname_list,
        'childcid': childcid,
        'order_rule_list': order_rule_list,
        'order_rule_view': order_rule,
    }

market.html:

<div id="sort_rule_container">
    <div>
        {% for order_rule in order_rule_list %}
            {% ifequal order_rule_view order_rule.1%}
                <a href="{% url 'peiqi1:market_with_params' typeid=typeid childcid=childcid order_rule=order_rule.1%}">
                    <button class="btn btn-success">{{ order_rule.0 }}</button>
                </a>
                {% else %}
                <a href="{% url 'peiqi1:market_with_params' typeid=typeid childcid=childcid order_rule=order_rule.1%}">
                    <button class="btn btn-default">{{ order_rule.0 }}</button>
                </a>

            {% endifequal %}
        {% endfor %}

测试：

收起子分类框

market.js:

    $('#sort_rule').click(function(){
        console.log('排序规则');

        var $sort_rule_container = $("#sort_rule_container");

        $sort_rule_container.slideDown() /* 下弹特效显示 */
        var $sort_rule = $(this);
        
        var $span = $sort_rule.find('span').find('span');
        
        $span.removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
    })
    
    $('#sort_rule_container').click(function () {  /* 点击事件，上拉收起菜单 */
        var $sort_rule_container = $(this);
        $sort_rule_container.slideUp();
        
        var $sort_rule = $('#sort_rule');

        var $span = $sort_rule.find('span').find('span');

        $span.removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
    })
})

解决冲突

当我们同时点开全部分类，和综合排序的时候两个子类框都会出来，这种情况是不合理的，应该打开另外一个子分类栏的时候，先前打开的分类栏就要自动收起。
market.js:

$(function () {
    $('#all_types').click(function(){
        console.log('全部类型');

        var $all_types_container = $('#all_types_container'); /* 找到all_types_container的div标签 */

        $all_types_container.show();  /* 显示 */

        var $all_type = $(this);  /* 找到箭头的位置 */

        var $span = $all_type.find('span').find('span'); /* 取出箭头对应的class */

        $span.removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');


        /* 打开全部分类时，收起综合排序 */
        var $sort_rule_container = $('#sort_rule_container');

        $sort_rule_container.slideUp();

        var $sort_rule = $('#sort_rule');

        var $span_sort_rule = $sort_rule.find('span').find('span');

        $span_sort_rule.removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');

    })

    $('#all_types_container').click(function () {
        var $all_type_container = $(this);

        $all_type_container.hide();

        var $all_type = $('#all_types');  /* 找到箭头的位置 */

        var $span = $all_type.find('span').find('span'); /* 取出箭头对应的class */

        $span.removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');

        })

    $('#sort_rule').click(function(){
        console.log('排序规则');

        var $sort_rule_container = $("#sort_rule_container");

        $sort_rule_container.slideDown() /* 下弹特效显示 */
        var $sort_rule = $(this);

        var $span = $sort_rule.find('span').find('span');

        $span.removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');

        /* 打开综合排序，自动关闭全部分类 */
        var $all_type_container = $('#all_types_container');

        $all_type_container.hide();

        var $all_type = $('#all_types');  /* 找到箭头的位置 */

        var $span_all_type = $all_type.find('span').find('span'); /* 取出箭头对应的class */

        $span_all_type.removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
    })

    $('#sort_rule_container').click(function () {  /* 点击事件，上拉收起菜单 */
        var $sort_rule_container = $(this);
        $sort_rule_container.slideUp();

        var $sort_rule = $('#sort_rule');

        var $span = $sort_rule.find('span').find('span');

        $span.removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
    })
})