phpcms 模板用ajax调用数据

因分类多级，需要使用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.onresize=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?' onclick="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));
    }

 

posted @ 2016-09-28 09:58  _DongGe  阅读(394)  评论(0)  编辑  收藏  举报