无限级分类笔记(后台处理+前台显示):
最后效果:
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();
});
});
这样就搞定了