实操：商品列表三级分类的实现方法

　　对于分类来说，一般包括一级分类，二级分类，三级分类，一般2级分类是比较好做的，大部分网站都是左边点击二级分类，右边显示相对应商品，这就要用到jquery技术了。下面就来为大家详细分析一下该如何实现吧。

　　首先把二级分类给全部遍历出来，Html代码如下：
<volist name='cate' id='vo'>
<li <if condition="$Think.get.name eq $vo['name']">class="active"</if> onclick="funbrand('{$vo.name}','{$vo.id}')" ">
<span style="font-weight: 600;font-size: 13px;height: 45px; display: flex;justify-content: center;align-items: center;padding: 0;border-right: 5px solid white;" data="{$vo.id}" name="cateid" title="">{$vo.name}</span>
</li>
</volist>

根据需求添加点击事件，写jquery：
jquery代码如下:
function funbrand(id,obj){
debugger;
$(obj).addClass('active');

$(obj).siblings('a').removeClass('active');  
cateid=$("span[name='cateid']").attr('data');  

$('.all').removeClass('active');  
var test=$('.all').attr('title');   
var goodscateid = id;  
 cate_id=$("input[name='cateid1']").val();  
$('#id').val(goodscateid);  
var types = $('#type').val();  
$.ajax({  
    url:"{:U('Mobile/goods1')}",  
    data:{goodscateid:goodscateid,types:types,cate_id:cate_id},  
    dataType:"json",  
    type:"post",  
    success:function(data){  
        alert(data.v);  
        str = '';  
        $('.good_list').empty();  
        if (data.status==1) {  

            $.each(data.shops,function(index,obj){  

             str+='<dl class="clearfix">';  

             if(test=='套餐'){  
                 str+='<dt class="col-sm-5 col-xs-5"  style="text-align: center;margin-bottom:25px;margin-top:25px">';  
                 str+='<a style="color:#000;width:200px;overflow:hidden;" href="{:U("Mobile/good_detail")}?gid='+obj.gid+'">';  
                 str+='<em><img src="/Public/Admin/kindeditor-4.1.10/attached/image'+obj.thumb+'" style="width:80%;margin-top:1rem;" class="img-responsive center-block"></em>';  
                     str+='<dd class="col-sm-7 col-xs-7" style="height:14rem;padding-top: 10px;"><div style="height:50px; overflow:hidden;"><h4 style="height: 30px; line-height: 10px; color:#000; ">'+obj.gname+'</h4></div><p style=" font-size:18px;"> .... </p><br/> <p class="money" style="margin-top:0px; margin-bottom:-10px; "><i>￥</i>'+obj.price+'</p><br>';  
             }else{  
                 str+='<dt class="col-sm-5 col-xs-5"  style="text-align: center;margin-bottom:8px;margin-top:8px">';  
                 str+='<a style="color:#000;width:200px;overflow:hidden;" href="{:U("Mobile/good_detail")}?gid='+obj.gid+'">';  
                 str+='<em><img src="/Public/Admin/kindeditor-4.1.10/attached/image'+obj.thumb+'" style="width:80%;margin-top:1rem;" class="img-responsive center-block"></em>';  
               str+='<span>'+obj.norms+'/'+obj.unity+'</span></a></dt>';  
                str+='<dd class="col-sm-7 col-xs-7" style="height:14rem;padding-top: 10px;"> <h4 style="height: 30px; line-height: 15px; color:#000; ">'+obj.gname+'</h4> <p class="money" style="margin-top:30px; margin-bottom:-10px; "><i>￥</i>'+obj.price+'</p><br>';  
            }   

            if (obj.quota!='0') {  
                    str+=' <span style="border: 1px solid #c63731; padding:2px; color:#c63731;border-radius: 8px; font-size: 10px;">'  
                    str+='限购'+obj.quota+ obj.unity;               
                   str+='</span>';  
                     }  
               if (obj.repertor==0) {  
                   if(test=='套餐'){  
                         str+=' <em title="'+obj.gid+'" class="addcar" att="'+obj.addnum+'" style="position:absolute;bottom:-15px;right:0px;">';  
                        str+='<img src="/Public/Mobile/images/add_cart.png" class="img-responsive"  width="30" /></em>';  

                    }else{  
                         str+=' <em title="'+obj.gid+'" class="addcar" att="'+obj.addnum+'" style="position:absolute;bottom:5px;right:0px;">';  
                         str+='<img src="/Public/Mobile/images/add_cart.png" class="img-responsive"  width="30" /></em>';   
                    }  

                      }else{  
                         str+='<em>补货中</em>'  
                    }  
                str+=' </dd></dl>';  
                     })  
            $('.good_list').append(str);  
            $('.good_list').html(str).ready(function(){  

                 $(".addcar").click(function(){  
                 // debugger;  
                var uid = $('#uid').val();  
                var gid = $(this).attr('title');  
                // var cnum = $(this).parent().find("input[class*=num_val]").val();  
                // alert(uid);  
                var cnum=$(this).attr('att');  
                if (uid=='') {  
                    alert('请先登陆');  
                    location="{:U('Mobile/login')}";  
                    return false;  
                }  

                 $.ajax({  
                    url:"{:U('Mobile/goods_info')}",  
                    data:{gid:gid},  
                    dataType:"json",  
                    type:"post",  

                     success:function(data){  
                      // alert(data);  
                        // alert(data.thumb);  
                         // $(".img").src('/Public/Admin/kindeditor-4.1.10/attached/image'+data.thumb);  
                        var thumb=data.thumb;  
                        var tep='/Public/Admin/kindeditor-4.1.10/attached/image'+thumb;  
                          $("#shopping_img").attr('src', src=tep) ;  
                          $('.mo_shopping_quota').text(data.quota);  
                          $('.mo_shopping_gid').text(data.gid);  
                         $(".title").text(data.gname);  
                         $(".shopping_gui").text(data.norms+'/'+data.unity);  
                         $('.shopping_money').text(data.price);  
                         $('.shelflife').text(data.shelflife);  
                         $('.mo_shopping_gid').text(data.gid);   
                        $('.mo_shopping_addnum').text(data.addnum);  
                          $(".mo_shopping").css("display","block");  
                          $('.num').val(data.addnum);  
                         }  
                     })  

                 })  

             });  
         }  
     },  
 })  

}

Php查询并输出，代码如下：
public function goods1(){
$goodscateid=I('goodscateid');
$cate_id=I('cate_id');
$where['brandid']=array('exp',"regexp '(,|^)" .'$cate_id'."(,|$)'");
// $where['bid']=$goodscateid;
// $info=M("brandlist")->where("bid=$goodscateid")->find();
$info=M("brandlist")->where($where)->select();
foreach ($info as $key => $value) {
$bname=$value['bname'];
$shops[] = M('goodsinfo')->where("brandlist='$bname'")->order("gid desc")->find();
}

 foreach ($shops as $key => $value) {  
      $pic=explode(",",substr($value['thumb'],1,strlen($value['thumb'])));  
      $shops[$key]['thumb']=$pic[0];  
}  
if ($shops) {  
      $returnValue['status']=1;  
      $returnValue['shops']=$shops;  

    }else{  
  $returnValue['status']=2;  

    }  
$this->ajaxReturn($returnValue);  

}

　　好了，现在大家已经知道该怎么做了吧，那么如果还存在有疑问的，可以留言咨询，我们可以共同讨论，一起学习进步。

　　本文由专业的郑州app开发公司燚轩科技整理发布，原创不易，如需转载请注明原文作者及出处!