tp5调用父栏目数据使用bootstrap展示栏目树形结构
未知
2021-06-03 17:29:42
0
问题描述:

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


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

    }

相关内容

PHP sg15 与数据库...
本文介绍了使用PHP与数据库交互的方法,特别是使用sg15框架或库...
2026-02-10 01:23:38
PHP与YAML集成:实现...
本文介绍了PHP与YAML集成的实现方式,包括读取和写入YAML文...
2026-02-03 01:23:45
探索PHP与YAML的互操...
本文探讨了PHP与YAML的互操作性,介绍了YAML的数据格式及P...
2026-02-02 01:23:35
使用PHP处理YAML数据...
本文介绍了使用PHP处理YAML数据的技巧和策略,包括解析、操作Y...
2026-02-01 01:23:40
深入理解MySQL视图的工...
摘要: MySQL视图是一种虚拟表,通过封装SQL查询定义。它不...
2026-01-31 01:23:34
MySQL视图与普通表的区...
MySQL视图与普通表:虚拟与实际的存储方式,视图只可查询不可修改...
2026-01-30 01:23:36

热门资讯

object json转化为数... //调用api 程序,通知商户订单异常 20200314 public function callt...
tp5 composer we... 问题: 正常使用中的tp5程序需要安装微信支付v3。 tp5使用cmd面板composer requ...
laravel 对接支付宝当面... 第一步 开发中心网页移动应用下支付接入 第二步 创建应用后需添加可支付的方式 第三步 配置公钥与私钥...
tp5 jquery判断手机端... application--common.php中添加如下代码 //函数作用是判断用户打开的是手机端还...
Laravel 查看SQL操作... 方法一:临时打印操作记录 DB::connection()-enableQueryLog(); # ...
php 打印date函数出现错... 问题描述: 我使用的是phpstudy,在练习时间函数的时候,打印出现在的时间,date(Y-m-d...
Laravel 5.5 .No... 创建了新的laravel项目后, 运行提示:No application encryption ke...
php函数substr_rep... php函数substr_replace从某个位置替换或删除或插入字符串
生成随机字符唯一标识符guid... /** * @param $length * @return string * 生成随机字符串 */...
Laravel 引入自定义类库... 强烈建议引入的类 都是含有命名空间的,这样使用起来就不会出现重名的情况。!!当然,没有命名空间也可以...