tp5调用父栏目数据使用bootstrap展示栏目树形结构

发布时间:2021-06-03作者:小灵龙点击:54

问题描述:

实现一个下图的树形结构栏目。


解决办法:
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();

    }

标签: