无限级分类笔记,

无限级分类笔记（后台处理+前台显示）：

 

最后效果：

 

 

php后台处理

数据库设计：

 

关键方法

  

  /**
    * 得到每级分类的级数
    * @param array $category 分类数组
    * @param number $parent_id 分类父id
    * @param number $level 分类级数
    * @param number $nick 不用赋值，标明分类id的关系，主要为前台显示分类服务。如3_6_8,代表分类id=8的直接上级为6，6的上级为3，3为顶级分类id。
    * @return multitype:array
    */
    function sort($category,$parent_id=0,$level=0,$nick=''){
       static $arr=array();
       foreach($category as $k=>$v){
           if($v['parent_id']==$parent_id){
                $v['level']=$level;
                $v['nick']=$nick.$v['id'];
                $arr[]=$v;
                $this->sort($category,$v['id'],$level+1,$v['nick'].'_');
           }
       }
       return $arr;
    }

 

1.       调用sort方法，得到的数组格式如下：

$list=$this->sort($category);//$category为数据库中查询的分类数组

得到数据格式如下：

Level作为控制每个级别分类前的空格

Nick用来控制分类的关闭/打开

将这个数组传给前台

 

2.       前台部分：

<table class="am-table am-table-hover">
<foreach name="list" item="l">
<tr class="category" id="{$l.nick}" name="show">
    <td colspan="7"><php>echo str_repeat("    ",$l['level']);</php><span id="plus{$l.nick}"style="display:none"><img style="width:13px;height:13px" src="__PUBLIC__/images/menu_plus.gif"/></span><span id="minus{$l.nick}" ><img style="width:13px;height:13px"  src="__PUBLIC__/images/menu_minus.gif"/></span> {$l.name}</td>
</tr>
</foreach>
</table>

3.       JS控制分类关闭/打开

  

 $(function() {
      $('tr.category')
         .css("cursor","pointer")
         .attr("title","点击这里展开/关闭")
         .click(function(){
            var id=this.id;
            var HideOrShow=$(this).attr('name');
            var tf=true;
            if(HideOrShow=="show"){
                $(this).attr('name','hide');
                tf=false;
            }else{
                $(this).attr('name','show');
                tf=true;
            }
            $("tr[id^="+id+"_]").each(function(){
                $(this).toggle(tf);
                var plus=$(this).find('#plus'+this.id);
                var minus=$(this).find('#minus'+this.id);
                if(tf){
                   $(this).attr('name','show');
                   plus.toggle(false);
                   minus.toggle(true);
                }
                else{
                   $(this).attr('name','hide');
                   plus.toggle(true);
                   minus.toggle(false);
                }
            });
            $('#plus'+this.id).toggle();
            $('#minus'+this.id).toggle();
         });
});
 

 

这样就搞定了