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();

    }

相关内容

浙江宁波喊停“刷医保购买华...
浙江宁波暂停使用医保卡购买华为WATCH D2智能手表,规范医保资...
2025-02-09 22:00:58
如何识别和应对网络攻击中的...
摘要:Webshell威胁是网络攻击的重要形式,通过观察流量、检查...
2025-02-09 21:46:37
高级Web应用防火墙:提升...
高级Web应用防火墙(WAF)是保护Web应用的关键技术,通过深度...
2025-02-09 20:23:41
WAF在网络安全防护中的角...
摘要: 随着互联网发展,网络安全问题突出。Web应用防火墙(WA...
2025-02-09 19:23:38
使用 PHP upload...
使用 PHP 的 `upload_max_filesize` 时,...
2025-02-09 13:23:41
触发器在数据完整性维护中的...
触发器在数据库中维护数据完整性方面具有重要作用,能确保数据一致性、...
2025-02-09 13:00:43

热门资讯

Laravel 5.5 .No... 创建了新的laravel项目后, 运行提示:No application encryption ke...
生成随机字符唯一标识符guid... /** * @param $length * @return string * 生成随机字符串 */...
tp5 jquery判断手机端... application--common.php中添加如下代码 //函数作用是判断用户打开的是手机端还...
php 打印date函数出现错... 问题描述: 我使用的是phpstudy,在练习时间函数的时候,打印出现在的时间,date(Y-m-d...
Laravel 查看SQL操作... 方法一:临时打印操作记录 DB::connection()-enableQueryLog(); # ...
php函数substr_rep... php函数substr_replace从某个位置替换或删除或插入字符串
layui缩略图 div class=layui-form-item label class=layui-form-l...
object json转化为数... //调用api 程序,通知商户订单异常 20200314 public function callt...
php银行开放平台接口:pfx... 问题描述: 对接易通银行,他们的服务开放平台是java开发,而我的是php,现在需要php版本的SD...
Laravel 引入自定义类库... 强烈建议引入的类 都是含有命名空间的,这样使用起来就不会出现重名的情况。!!当然,没有命名空间也可以...