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

　　对于分类来说，一般包括一级分类，二级分类，三级分类，一般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  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"  >';                 str+='<a  href="{:U("Mobile/good_detail")}?gid='+obj.gid+'">';                 str+='<em><img src="/Public/Admin/kindeditor-4.1.10/attached/image'+obj.thumb+'"  class="img-responsive center-block"></em>';                     str+='<dd class="col-sm-7 col-xs-7" ><div ><h4 >'+obj.gname+'</h4></div><p > .... </p><br/> <p class="money" ><i>￥</i>'+obj.price+'</p><br>';             }else{                 str+='<dt class="col-sm-5 col-xs-5"  >';                 str+='<a  href="{:U("Mobile/good_detail")}?gid='+obj.gid+'">';                 str+='<em><img src="/Public/Admin/kindeditor-4.1.10/attached/image'+obj.thumb+'"  class="img-responsive center-block"></em>';               str+='<span>'+obj.norms+'/'+obj.unity+'</span></a></dt>';                str+='<dd class="col-sm-7 col-xs-7" > <h4 >'+obj.gname+'</h4> <p class="money" ><i>￥</i>'+obj.price+'</p><br>';            }             if (obj.quota!='0') {                    str+=' <span >'                    str+='限购'+obj.quota+ obj.unity;                                str+='</span>';                     }               if (obj.repertor==0) {                   if(test=='套餐'){                         str+=' <em title="'+obj.gid+'" class="addcar" att="'+obj.addnum+'" >';                        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+'" >';                         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开发公司燚轩科技整理发布，原创不易，如需转载请注明原文作者及出处!