文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-06-14 20:10

关注

这篇文章将为大家详细讲解有关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】

<!DOCTYPE html><html><head>   <meta charset="UTF-8">   <title>Title</title>   <link rel="stylesheet" href="__ADMIN__/js/jquery-3.2.1.js">   <link rel="stylesheet" href="__ADMIN__/layui/css/layui.css">   <script type="text/javascript" src="__ADMIN__/layui/layui.js"></script></head><body><!--test12对应的是layuitree.render中的elem值,这两个值必须一致--><div id="test12"></div><script type="text/javascript">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 + '<br>节点数据:' +                                 JSON.stringify(data));        }               });        })       });});</script></body></html>

第二步:书写后台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'][$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怎么实现栏目数的调用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯