因分类多级,需要使用ajax进行获取分类的数据,原本的框架无法满足,故写ajax获取分类数据方法,做记录
1、模板页
phpcms/templates/default/content/product_left.html
1 <!--分类--> 2 <aside class="productClass"> 3 <div class="prdShadow"></div> 4 <div class="productDialog"> 5 <p class="productClassT">分类</p> 6 <!--目录--> 7 <section class="classMenu tabTab" id="cate1" style="display:block;"> 8 <dl class="box classMenuDl active h_tabTab"> 9 <dd class="b_f1 classMenuDdl more" onclick="show_category(93);">产品</dd> 10 <dd class="classMenuDdR"> 11 {pc:get sql="select sum(items)as items from klx_category where catid in(93,69,70,71,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92)" return="data2"} 12 {loop $data2 $v} 13 {$v['items']} 14 {/loop} 15 {/pc} 16 </dd> 17 </dl> 18 <dl class="box classMenuDl locate" data-url="/list-11-1.html"> 19 <dd class="b_f1 classMenuDdl">工程案例</dd> 20 <dd class="classMenuDdR"> 21 {pc:get sql="select sum(items)as items from klx_category where catid =11" return="data"} 22 {loop $data $v} 23 {$v['items']} 24 {/loop} 25 {/pc} 26 </dd> 27 </dl> 28 </section> 29 <section class="classNav tabTab" id="cate2"></section> 30 </div> 31 </aside> 32 <script> 33 $(function(){ 34 $(".backMenu").click(function(){ 35 $(".classNav").hide(); 36 $("#cate1").css('display','block'); 37 }); 38 $("#backMenu").click(function(){ 39 $("#cate1").css('display','block'); 40 }); 41 $(".classMenuDdl.more").click(function(){ 42 $(".classMenu").hide(); 43 $(".classNav").eq(0).show(); 44 }); 45 }); 46 </script>
2、js文件
statics/js/new/main.js
1 //JS控制全局字体自适应大小 2 function placeholderPic(){ 3 var w = document.documentElement.offsetWidth; 4 document.documentElement.style.fontSize=w/20+'px'; 5 } 6 placeholderPic(); 7 window.οnresize=function(){ 8 placeholderPic(); 9 } 10 11 //a链接 12 $(document).ready(function(){ 13 $(".locate").on("click",function(){ 14 location.href=$(this).attr("data-url"); 15 }) 16 }); 17 18 $(document).ready(function(){ 19 //搜索框 20 $(".searchBtn").click(function(){ 21 $(".appI").hide(); 22 $(".searchI").slideToggle(); 23 }); 24 $(".searchBarC span").click(function(){ 25 $(".searchBarC span").removeClass("active"); 26 $(this).addClass("active"); 27 }); 28 //APP下载 29 $(".appBtn").click(function(){ 30 $(".searchI").hide(); 31 $(".appI").slideToggle(); 32 }); 33 $(".bodyHd1").scroll(function(){ 34 $(".appI").hide(); 35 $(".searchI").hide(); 36 }); 37 //电话 38 $(".footerLi.phone").click(function(){ 39 $(".h_phone").show(); 40 }); 41 $(".shadow").click(function(){ 42 $(".h_phone").hide(); 43 $(".h_share").hide(); 44 }); 45 $(".j_Esc").click(function(){ 46 $(".h_phone").hide(); 47 }); 48 //分享 49 $(".footerLi.share").click(function(){ 50 $(".h_share").show(); 51 }); 52 //留言选项卡 53 $(".messageBar .messageTip").click(function(){ 54 $(".messageBar .messageTip").removeClass("active"); 55 $(this).addClass("active"); 56 var m1 = $(this).index(); 57 $(".messageL").each(function(){ 58 var n1 = $(this).index(); 59 if( n1 == m1 ){ 60 $(".messageL").hide(); 61 $(this).show(); 62 } 63 }); 64 }); 65 //内页顶部栏目 66 var w1 = $(".columnLi").outerWidth(); 67 var l1 = $(".columnLi").length; 68 var l2 = l1 - 4; 69 var w2 = ( w1 * l1 ) + 2; 70 var _leftMax = w1 * l2; 71 $(".columnUl").css("width",w2 + "px"); 72 $(".columnNext").click(function(){ 73 var _left = parseInt($(".columnUl").css("left")); 74 _left -= w1; 75 $(".columnUl").css("left",_left + "px"); 76 if( _left < -_leftMax){ 77 $(".columnUl").css("left",-(_leftMax)+"px"); 78 } 79 }); 80 $(".columnPrev").click(function(){ 81 var _left = parseInt($(".columnUl").css("left")); 82 _left += w1; 83 $(".columnUl").css("left",_left + "px"); 84 if( _left > 0){ 85 $(".columnUl").css("left","0px"); 86 } 87 }); 88 //产品筛选 89 $(".productTopR").click(function(){ 90 $(".productClass").animate({left:0},1000); 91 }); 92 $(".prdShadow").click(function(){ 93 $(".productClass").animate({left:"30rem"},1000); 94 }); 95 //字号 96 $(".productTopZ").click(function(){ 97 $(".fontSize").toggle(); 98 }); 99 $(".fontSize .smoll").click(function(){ 100 $(".fontSize").hide(); 101 $(".h_font").css("font-size","0.75rem"); 102 return false; 103 }); 104 $(".fontSize .middle").click(function(){ 105 $(".fontSize").hide(); 106 $(".h_font").css("font-size","0.875rem"); 107 return false; 108 }); 109 $(".fontSize .big").click(function(){ 110 $(".fontSize").hide(); 111 $(".h_font").css("font-size","1rem"); 112 return false; 113 }); 114 //地图/列表选项卡 115 $(".mapTip span").click(function(){ 116 $(".mapTip span").removeClass("active"); 117 $(this).addClass("active"); 118 var m2 = $(this).index(); 119 $(".mapCumn").each(function(){ 120 var n2 = $(this).index(); 121 if( n2 == m2 ){ 122 $(".mapCumn").hide(); 123 $(this).show(); 124 } 125 }); 126 }); 127 //地图筛选 128 $(".rightDig").click(function(){ 129 $(".productClass").animate({left:0},1000); 130 }); 131 $(".prdShadow").click(function(){ 132 $(".productClass").animate({left:"25rem"},1000); 133 }); 134 //地图菜单 135 $(".leftDig").click(function(){ 136 $(".mapSidebar").animate({right:0},1000); 137 }); 138 $(".mapShadow").click(function(){ 139 $(".mapSidebar").animate({right:"25rem"},1000); 140 }); 141 $(".productDialog").css("overflow","scroll"); 142 }); 143 //显示添加机型 144 function show_category(catid) { 145 $.getJSON("/index.php?m=content&c=index&a=category_getjson_ids&catid="+catid, function(json){ 146 var category_list = ''; 147 var _html1 = '<section class="classNav tabTab">'; 148 _html1 += '<dl class="box classNavDl active">'; 149 _html1 += '<dd class="b_f1 classNavDdl parent">上级:'+json.pname +'</dd>'; 150 _html1 += '<dd class="classNavDdR backMenu" id="backMenu">目录</dd>'; 151 _html1 += '</dl>'; 152 $.each(json.data, function(i, n){ 153 _html1 += '<dl class="box classMenuDl '+(json.data[i].child==1?'h_tabTab':'h_tabTab locate')+'"'+ (json.data[i].child==1?'':'data-url="'+ json.data[i].url +'"')+'>';//有三级加class:h_tabTab;//没三级加class:locata data-url链接 154 _html1 += '<dd class="b_f1 classMenuDdl '+ (json.data[i].child==1?'more':'')+'"'+ (json.data[i].child==1?' οnclick="show_category('+ json.data[i].catid +');"':'') +' >'+json.data[i].catname +'</dd>'; 155 _html1 += '<dd class="classMenuDdR">'+json.data[i].items +'</dd>'; 156 _html1 += '</dl>'; 157 }); 158 _html1 += '</section>'; 159 category_list += _html1; 160 $('#cate2').html(category_list); 161 $("#backMenu").click(function(){ 162 $('#cate2').empty(); 163 $("#cate1").css('display','block'); 164 }); 165 $(".locate").on("click",function(){ 166 location.href=$(this).attr("data-url"); 167 }) 168 }); 169 }
3、程序控制
路径:phpcms/modules/content/index.php增加一个函数
//列表页 public function category_getjson_ids() { $catid = intval($_GET['catid']); $this->category = pc_base::load_model('category_model'); $data = $this->category->select(array('parentid'=>$catid),"catid,siteid,parentid,child,arrchildid,catname,url,items"); $result = array(); foreach($data as $key=>$val){ $category = $this->category->get_one(array('catid'=>$val['catid']),"catname,url,items"); $result[$key] = array( 'catid' => $val['catid'], 'siteid' => $val['siteid'], 'parentid' => $val['parentid'], 'child' => $val['child'], 'arrchildid' => $val['arrchildid'], 'catname' => $val['catname'], 'url' => $val['url'], 'items' => $val['items'], 'pcname' => $category['catname'], 'pcitems' => $category['items'], 'pcurl' => $category['url'], ); } $cate = $this->category->get_one(array('catid'=>$catid),"catname,url,items"); echo json_encode(array('data' => $result,'pname' => $cate['catname'],'pitems'=>$cate['items'],'purl'=>$cate['url'],'vcatid'=>$catid)); }