问题描述:
实现一个下图的树形结构栏目。
解决办法:
html代码:
{volist name="list" id="vo"}
//第一个tr展示父栏目
<tr>
<td onclick="loadSon(this,'catalog{$vo.id}')">
<span class=" glyphicon glyphicon-plus" aria-hidden="true"></span>
</td>
<td>{$vo.typename}</td>
<td>
<a href="__URL__/addSonType/parent_id/{$vo.id}/channel_type/{$vo.channel_type}" class="btn btn-primary btn-sm">增加子栏目</a>
</td>
</tr>
//如果父栏目下有子栏目就循环显示。getsub是放在common.php中的公共函数,调用父栏目ID下的所有子栏目
{eq name="$vo.is_exist" value="1"}
{volist name="$vo.id|getsub" id="vos"}
<tr class="catalog{$vo.id} cataloghide">
<td></td>
<td>{$vos.typename}</td>
<td>
<a href="__URL__/editType/id/{$vos.id}" class="btn btn-primary btn-sm">修改</a>
</td>
</tr>
{/volist}
{else/}
{/eq}
{/volist}
<script type="text/javascript">
function loadSon(e,biao){
console.log(biao);
if($("."+biao).css('display')=='none'){
$("."+biao).addClass('catalogshow');
$("."+biao).removeClass('cataloghide');
$(e).find('span').removeClass('glyphicon-plus').addClass('glyphicon-minus');
}else{
$("."+biao).addClass('cataloghide');
$("."+biao).removeClass('catalogshow');
$(e).find('span').addClass('glyphicon-plus').removeClass('glyphicon-minus');
}
}
</script>
控制器中的方法:
// 加载文章栏目列表页面
public function indexType(){
//从数据库获取顶级栏目数据
$mm=Db::name('arctype')->where('parent_id',0)->order('id','asc')->paginate(15);
$mm_all=$mm->all();//获取数组
foreach ($mm_all as $k=> &$value) {
//判断当着顶级栏目有没有子栏目,
$subcatalog=Db::name('arctype')->where('parent_id',$value['id'])->select();
$value['is_exist']=0;//没有子栏目
if($subcatalog){
$value['is_exist']=1;//有子栏目
}
$mm[$k]=$value;
}
//分配变量
$this->assign(["list"=>$mm]);
return view();
}