重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

TP5.1+layui怎么实现栏目数的调用

这篇文章将为大家详细讲解有关TP5.1+layui怎么实现栏目数的调用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

目前成都创新互联已为千余家的企业提供了网站建设、域名、雅安服务器托管绵阳服务器托管、企业网站设计、西山网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

layui是什么

layui是一款采用自身模块规范编写的前端UI框架,它遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,适合新手,并且它还提供了丰富的内置模块,他们皆可通过模块化的方式按需加载,从核心代码到API的每一处细节都经过精心雕琢,非常适合界面的快速开发,能够作为PC网页端后台系统与前台界面的速成开发方案。

整合Layui+TP5.1时,有时候需要调用栏目树,这就需要进行数据的动态化调用,之前试过很多种方法,都没有生效,后面查看了JS数据调用的方法,结合layui进行多次尝试,终于找出了能够实现这一功能的方法,希望对大家有用。

以下的例子是一个调用城市的实例,数据库字段包括:id,order(排序),pid(上级城市ID)、name(城市名称),这里包含了省级、市级、县/区级三级城市。

第一步:根据Layui给出的方法,首先写出HTML页面,如下所示:

其中___ADMIN__是你自己配置的样式路径,修改成自己的路径即可。另外由于这里调用数据采用的是js数据调用,所以需要加载jquery库,我这里用的是jquery-3.2.1,大家可以根据自己的实际需求加载对应版本的jquery库,这里不多说,直接上代码:

【HTML】




   
   Title
   
   
   



layui.use(['form','layer','element','tree', 'util'],function(){        $ = layui.jquery;         var form = layui.form         ,layer = layui.layer;         var tree = layui.tree         ,util = layui.util;         var element = layui.element;         form.on('checkbox(checkeds)', function(data){            if(data.elem.checked){                $('.checkone').prop('checked',true);         }else{                $('.checkone').prop('checked',false);         }            form.render('checkbox');         });    //调用数据     $(document).ready(function(){            $.get('{:url("getCategoryList")}').done(function (data) {                var arr =$.parseJSON(data);         //alert(arr);         tree.render({                    elem: '#test12'         ,data: arr                    ,showCheckbox: false  //是否显示复选框         ,id: 'demoId1'         ,isJump: false //是否允许点击节点时弹出新窗口跳转         ,click: function(obj){                        //var data = obj.data;  //获取当前点击的节点数据         var dump_url = obj.data.href;         window.location.href = dump_url;         //layer.msg('状态:'+ obj.state + '
节点数据:' +                                 JSON.stringify(data));         }                });         })        }); });

第二步:书写后台PHP代码,这里我是根据TP5.1 的规则书写的代码

【PHP代码】

//获取栏目信息
public function getCategoryList(){
   $id = Request::param('id');
   $parentId = $this->getAllParentId($id);//获取父级ID信息
   $list = AreaModel::where('pid',100000)
       ->where('status',0)
       ->order('order asc')
       ->select();
   $cate = array();
   foreach ($list as $key=>$v){
       $cate[$key]['title'] = $v['name'];
       if(in_array($v['id'],$parentId)){
           $cate[$key]['checked'] = 'true';
           $cate[$key]['spread'] = 'true';
       }

       $cate[$key]['field'] = 'name'.$v['id'];
       $cate[$key]['id'] = $v['id'];
       $cate[$key]['href'] = "/yejuzhi/article/index?cid=".$v['id'];
       $child = AreaModel::where('pid',$v['id'])
           ->where('status',0)
           ->order('order asc')
           ->select();
       if($child){
           foreach ($child as $key1=>$c){
               /*$cate[$key]['children'][] = array(
                   'title' => $c['c_name'],
                   'id' => $c['id'],
                   'href' => "/yejuzhi/article/index?cid=".$c['id'],
                   'children' => array()
               );*/
               $cate[$key]['children'][$key1]['title'] = $c['name'];
               $cate[$key]['children'][$key1]['checked'] = 'true';
               $cate[$key]['children'][$key1]['spread'] = 'true';
               $cate[$key]['children'][$key1]['field'] = 'name'.$c['id'];
               $cate[$key]['children'][$key1]['id'] = $c['id'];
               $cate[$key]['children'][$key1]['href'] = '';
               $child1 = AreaModel::where('pid',$c['id'])
                   ->where('status',0)
                   ->order('order asc')
                   ->select();
               foreach ($child1 as $key2=>$value){
                   $cate[$key]['children'][$key1]['children'][$key2]['title'] = $value['name'];
                   $cate[$key]['children'][$key1]['children'][$key2]['checked'] = 'true';
                   $cate[$key]['children'][$key1]['children'][$key2]['spread'] = 'true';
                   $cate[$key]['children'][$key1]['children'][$key2]['field'] = 'name'.$value['id'];
                   $cate[$key]['children'][$key1]['children'][$key2]['id'] = $value['id'];
                   $cate[$key]['children'][$key1]['children'][$key2]['href'] = '';
               }
           }
       }

       //$cate[$key]['children'][] = array();
   }
   //dump($cate);
   return json_encode($cate);
}

在上面用到了一个方法:getAllParentId,这个方法是专门用来获取所有父级ID的方法,下面是代码信息:

//获取父级栏目
public function getAllParentId($id = 43){
   static $parentId;
   $cates = AreaModel::where('id',$id)->find();
   if($cates['pid']==0){
       $parentId[] = $cates['id'];
   }
   $list = AreaModel::where('status',0)
       ->order('order asc')
       ->select();
   foreach ($list as $k => $v) {
       if ($cates['pid'] == $v['id']) {
           $parentId[] = $v['id'];
           $this->getAllParentId($v['id']);
       }
   }
   return $parentId;
}

关于“TP5.1+layui怎么实现栏目数的调用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


当前名称:TP5.1+layui怎么实现栏目数的调用
分享路径:http://cqcxhl.cn/article/psidpo.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP