前端核心代码:
<!--大分类和子分类-->
<div class="col-md-12">
<p class="col-md-1 qbl-sort">方向:</p>
<if condition="($sort eq null) and ($parent eq null)">
<!--大分类和小分类同时不存在(全部)按钮高亮-->
<a href="{:U('Person/index',array('type'=>$type,'sort'=>$sortList['id'],'parent'=>$sortList['sid']))}" style="text-decoration: none">
<label class="btn qbl-btn-sort btn-info" style="margin-right:5px">全部</label>
</a>
<else/>
<a href="{:U('Person/index',array('type'=>$type,'sort'=>$sortList['id'],'parent'=>$sortList['sid']))}" style="text-decoration: none">
<label class="btn qbl-btn-sort btn-default" style="margin-right:5px">全部</label>
</a>
</if>
<if condition="$parent eq null">
<foreach name="directList" item="directList">
<if condition="$directList['id'] eq $sort">
<a href="{:U('Person/index',array('type'=>$type,'sort'=>$directList['id']))}" style="text-decoration: none">
<label class="btn qbl-btn-direct btn-info" style="margin-right: 5px">{$directList['name']}</label>
</a>
<else/>
<a href="{:U('Person/index',array('type'=>$type,'sort'=>$directList['id']))}" style="text-decoration: none">
<label class="btn qbl-btn-direct btn-default" style="margin-right: 5px">{$directList['name']}</label>
</a>
</if>
</foreach>
<else/>
<foreach name="directList" item="directList">
<a href="{:U('Person/index',array('type'=>$type,'sort'=>$directList['id']))}" style="text-decoration: none">
<label class="btn qbl-btn-direct btn-default <eq name='parent' value='$directList.id'>btn-info</eq>" style="margin-right: 5px">{$directList['name']}</label>
</a>
</foreach>
</if>
<hr/>
</div>
<div class="col-md-12">
<p class="col-md-1 qbl-sort">分类:</p>
<if condition="$parent eq null">
<!--大分类不存在(全部)按钮高亮-->
<a href="{:U('Person/index',array('sort'=>$sortList['id'],'parent'=>$sortList['sid']))}" style="text-decoration: none">
<label class="btn qbl-btn-sort btn-info" style="margin-right:5px">全部</label>
</a>
<else/>
<a href="{:U('Person/index',array('sort'=>$sortList['id'],'parent'=>$sortList['sid']))}" style="text-decoration: none">
<label class="btn qbl-btn-sort btn-default"
style="margin-right:5px">全部</label>
</a>
</if>
<foreach name="sortList" item="sortList">
<a href="{:U('Person/index',array('type'=>$type,'sort'=>$sortList['id'],'parent'=>$sortList['sid']))}" style="text-decoration: none">
<label class="btn qbl-btn-sort <eq name='sort' value='$sortList.id'>btn-info<else/>
btn-default</eq>" style="margin-right: 5px">{$sortList['name']}</label>
</a>
</foreach>
<hr/>
</div>
<!--分类和子分类-->
<!-- 类型分类-->
<div class="col-md-12">
<p class="col-md-1 qbl-sort">类型:</p>
<if condition="$type eq null">
<a href="{:U('Person/index',array('type'=>$typeList['id'],'sort'=>$sort,'parent'=>$parent))}" style="text-decoration: none">
<label class="btn qbl-btn-sort btn-info" style="margin-right:5px">全部</label>
</a>
<else/>
<a href="{:U('Person/index',array('type'=>$typeList['id'],'sort'=>$sort,'parent'=>$parent))}" style="text-decoration: none">
<label class="btn qbl-btn-sort btn-default" style="margin-right:5px">全部</label>
</a>
</if>
<foreach name="typeList" item="typeList">
<a href="{:U('Person/index',array('type'=>$typeList['id'],'sort'=>$sort,'parent'=>$parent))}" style="text-decoration: none">
<label class="btn btn-default qbl-btn-type <eq name='type' value='$typeList.id'>btn-info<else/>
btn-default</eq>" style="margin-right: 5px">{$typeList['name']}</label>
</a>
</foreach>
<hr/>
</div>
<!--类型分类-->
后端核心代码:
public function index()
{
//大分类列表
$direct = D("Sort")->where("parent=0")->field("id,name")->select();
//大分类转字符串
$directArr = array();
foreach ($direct as $item => &$value){
$directArr[] =$value['id'];
}
//参数
$get = I("get.");
//所有分类列表
$sort = $this->sortList($get['sort'],$directArr);
//类型分类
$typeList= $this->typeList($get['type']);
$assign = array(
"directArr" => implode(",",$directArr),
"directList" => $direct,
"sortList" => $sort,
"typeList" => $typeList,
'sort' => $get['sort'],
'parent' => $get['parent'],
'type' => $get['type']
);
$this->assign($assign);
$this->display();
}
public function typeList($id,$order="readtime",$state="1"){
$model = $this->Model ="Type";
$list = D($model)->order($order)->select();
return $list;
}
public function sortList($id,$directStr,$order="readtime",$state="1"){
$model = $this->Model ="Sort";
//查看点击的是否是大分类
if(!empty($id)){
if(in_array($id,$directStr)){ //大分类
$sql = "s.parent = '".$id."'";
$sort = D($model)
->where($sql)
->table("Sort as s")
->field(array('s.name', 's.id', 's.parent','s2.id as sid','s2.name as sname'))
->join('Sort AS s2 on s.parent = s2.id')
->select();
}else{ //小分类
$sql = array("Sort.id"=>$id);
//先查父级分类id
$sort = D($model)
->where($sql)
->order($order)->getField("parent");
$sort = D($model)
->table("Sort as s")
->where("s.parent=".$sort)
->field(array('s.name', 's.id', 's.parent','s2.id as sid','s2.name as sname'))
->join('Sort AS s2 on s.parent = s2.id')->select();
}
}else{
$sort = D($model)->where("s.parent<>0")
->table("Sort as s")
->field(array('s.name', 's.id', 's.parent','s2.id as sid','s2.name as sname'))
->join('Sort AS s2 on s.parent = s2.id')->select();
}
return $sort;
}
讲解:因为看到php中文网上实现的效果
数据表如下:
此部分功能只需要两张表,一张分类表(包含父级parent字段)。
后端代讲解:
采用thinkphp框架,通过前端页面传递过来的三个参数,sort字段对应分类,parent对应方向,type对应类型。后端代码并不复杂,根据参数对应去查找分类信息。这里要注意一下,页面的方向分类其实就是大的分类,即数据表sort中字段为parent为0的数据,页面的分类方向就是parent不为零的分类,就是详细分类,其实就是无限分类即的意思,只不过这里只分了两级。type就是type表里的数据,跟sort表中的type_id字段关联。后端分类就是根据前端传过来的sort的值进行查询分类信息。
前端代码讲解:
前端中含有较多的thinkphp标签,其实就是一些判断,因为没有全部这个选项,所以在页面构造的,但是需要通过参数来判断处理。判断方面我写比较复杂,可能会有更简单的方式来写,欢迎提意见。