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

整合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 的规则书写的代码

腾讯智影-AI数字人 腾讯智影-AI数字人

基于AI数字人能力,实现7*24小时AI数字人直播带货,低成本实现直播业务快速增增,全天智能在线直播

腾讯智影-AI数字人 73 查看详情 腾讯智影-AI数字人

【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;}

大家可以试一下,希望能够给与大家帮助。我这里是对城市信息的循环输出,大家也可以尝试进行其他信息的输出,只需要修改数据调用规则即可,但是需要注意的是,不管如何调用父级、子级是必须要存在的。

谢谢!

相关推荐:最新的10个thinkphp视频教程

以上就是TP5.1+layui实现栏目数的调用的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/347304.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月5日 20:55:53
下一篇 2025年11月5日 20:56:52

相关推荐

  • 移动端教室预约:如何选择合适的日历插件并实现竖向拖拽或多选功能?

    移动端教室预约日历插件的选择与实现 许多开发者都面临着开发移动端教室预约日历的需求,希望能够实现类似于竖向拖拽选择时间段的功能,以方便用户进行教室的预约和管理。本文将针对如何在移动端实现这种教室预约日历功能,并结合实际情况进行探讨。 提问者希望找到一款现成的插件,最好是原生或兼容Layui或WeUI…

    好文分享 2025年12月10日
    000
  • 深入理解PHP高性能框架中Workerman守护进程原理

    在我们日常编程中,常见的例子比如 php think 需要不断执行的任务,比如 php arts… 和 php yii…,都会通过 nohup 挂载到后台,以保持长期运行状态。同样,在workerman中,使用类似php index.php start的命令来启动进程,但不同的是,它不需要使用noh…

    2025年12月9日
    000
  • 如何用CSS选择器精确选中layui导航中特定li下的第一个a元素?

    CSS选择器精确选中特定a元素详解 本文探讨如何使用CSS选择器精准定位特定HTML结构中的元素,避免修改HTML结构(例如添加类名)。问题源于一段包含Layui框架样式的HTML代码: 默认展开 选项一 选项二 选项三 跳转项 目标:仅选中li.layui-nav-item下的第一个元素(文本内容…

    2025年12月2日 web前端
    000
  • ThinkPHP富文本图片上传

    最近有网友咨询如何在thinkphp中为富文本编辑器实现图片上传功能。针对这一问题,我查阅了相关资料并结合实际开发经验进行了总结,希望能为有相同需求的开发者提供清晰的实现思路和实用参考。 1、 首先需要搭建文章发布或编辑页面的表单结构,并初始化Layui富文本编辑器。最终呈现的效果及对应的HTML代…

    2025年12月2日 软件教程
    000
  • 如何利用Layui实现图片拖拽和缩放效果

    如何利用Layui实现图片拖拽和缩放效果 在现代网页设计中,图片的交互效果成为增加网页活力和用户体验的重要手段。其中,图片拖拽和缩放效果是常见且受欢迎的交互方式之一。本文将介绍如何使用Layui框架实现图片拖拽和缩放效果,并提供具体的代码示例。 一、引入Layui框架和相关依赖: 首先,我们需要在H…

    2025年11月27日 web前端
    000
  • 如何使用Layui开发一个支持在线预定的餐厅订餐系统

    如何使用Layui开发一个支持在线预订的餐厅订餐系统 引言:随着互联网的快速发展,越来越多的传统行业开始转向线上。餐饮行业也不例外,餐厅订餐系统的需求日益增长。本文将介绍如何使用Layui来开发一个支持在线预订的餐厅订餐系统,并提供具体的代码示例。 一、环境搭建首先,我们需要搭建好开发环境。Layu…

    2025年11月27日 web前端
    000
  • 如何使用Layui开发一个支持可编辑的视频播放列表管理系统

    如何使用Layui开发一个支持可编辑的视频播放列表管理系统 一、简介随着互联网的发展,人们对于在线视频的需求越来越大。而一个好的视频播放列表管理系统可以方便地实现视频的添加、编辑、删除等功能,提供良好的用户体验。本文将介绍如何使用Layui框架来开发一个支持可编辑的视频播放列表管理系统,并提供具体的…

    2025年11月27日 web前端
    000
  • 如何使用Layui框架开发一个支持实时通讯的在线客服系统

    如何使用Layui框架开发一个支持实时通讯的在线客服系统 概述:在线客服系统是现代企业提供与客户交流的重要渠道之一,而实时通讯是在线客服系统的关键技术之一。本文将介绍如何使用Layui框架开发一个支持实时通讯的在线客服系统,并提供具体的代码示例。 一、准备工作 安装Node.js:在开发环境中安装N…

    2025年11月27日 web前端
    100
  • 如何利用Layui实现可拖拽的拼图游戏功能

    如何利用Layui实现可拖拽的拼图游戏功能 拼图游戏是一种经典的娱乐活动,现在许多网页和移动应用程序都提供了这种游戏的版本。在本文中,我们将介绍如何使用Layui框架实现一个可拖拽的拼图游戏功能,并提供具体的代码示例。 Layui是一个轻量级的前端框架,提供了一套简化的界面组件和丰富的交互动画效果。…

    2025年11月27日 web前端
    000
  • 如何利用Layui实现可拖拽的日历组件功能

    如何利用Layui实现可拖拽的日历组件功能 一、简介Layui是一款轻量级的web前端框架,提供了丰富的UI组件和简洁易用的API接口。在日常的开发中,我们经常需要使用到日历组件来展示和管理时间信息。本文将介绍如何利用Layui的拖拽功能,实现一个可拖拽的日历组件。 二、准备工作在开始之前,我们需要…

    2025年11月27日 web前端
    000
  • 如何使用Layui开发一个支持手势操作的移动端应用

    如何使用Layui开发一个支持手势操作的移动端应用 移动设备的普及让人们更多地使用手机和平板电脑来访问和使用互联网。因此,开发一个支持手势操作的移动端应用是非常重要的。本文将介绍如何使用Layui完成这个任务,并提供具体的代码示例。 Layui是一套基于HTML、CSS、JavaScript的前端框…

    2025年11月27日 web前端
    100
  • 如何利用Layui实现图片旋转和镜像效果

    如何利用Layui实现图片旋转和镜像效果 引言:随着前端开发的快速发展,利用Layui框架可以轻松实现各种炫酷的效果。本文将介绍如何利用Layui框架实现图片旋转和镜像效果,并附上具体的代码示例,帮助读者快速上手。 一、Layui框架的使用Layui是一款简单、易用的前端UI框架,基于HTML5和C…

    2025年11月27日 web前端
    200
  • 如何利用Layui实现可拖拽的选项卡组件功能

    如何利用Layui实现可拖拽的选项卡组件功能 Layui是一款轻量级的前端UI框架,提供了丰富的组件和便捷的API,使得前端开发更加简单高效。其中,选项卡组件是Layui中常用的功能之一。在实际开发中,我们经常会遇到需要对选项卡进行拖拽排序或者拖动换位的需求。本文将以实例的形式介绍如何利用Layui…

    2025年11月27日 web前端
    000
  • laydate 历史版本事件支持详解:旧版本 laydate 如何触发选择和清空按钮事件?

    laydate历史版本事件支持详解 旧版本的laydate组件支持choose和清空按钮事件,如上图所示。该版本为layui 1.0.9,但具体版本号需要根据具体使用情况而确定。 INFINITE ALBUM 面向游戏玩家的生成式AI音乐 144 查看详情 建议使用最新版本的laydate组件,即l…

    2025年11月26日 web前端
    000
  • TP5.1 预定义环境变量

    在 tp5.1 中部分之前版本的预定义常量如 app_path、root_path 等被定义为了 项目的环境变量. 目前预定义的环境变量包括 (以项目路径 E:\wamp64\www\project_name 为例): think_path: 系统框架目录路径, 如 E:\wamp64\www\pr…

    PHP框架 2025年11月19日
    100
  • Thinkphp6 + layui 实现后台登录(验证码刷新)

    一、登录所用到组件 1、视图模板:安装:composer require topthink/think-view 2、验证码:安装:composer require topthink/think-captcha 3、session:需要开启session:打开app下的middeware.php文件…

    2025年11月18日 PHP框架
    100
  • 解决“tp5.1修改了代码,要过60秒才刷新”问题

                                                            下面由%ign%ignore_a_1%re_a_1%框架教程栏目给大家介绍解决“tp5.1修改了代码,要过60秒才刷新”问题的方法,希望对需要的朋友有所帮助! 关于TP5.1框架和php的…

    2025年11月15日
    000
  • DjangoAdmin 敏捷开发框架 Django+EleVue 版本 v2.6.1 发布

    v2.6.1 更新内容: 1、优化系统路由组件功能; 2、优化升级核心类库、组件;3、修复近期用户反馈的问题; 项目介绍 一款 Python 语言基于 Django、Vue、ElementUI、MySQL 等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架,本着简化开发、提升开发效率的初衷触发…

    2025年11月10日 行业动态
    100
  • 你没意识到 Steam 拥有的 6 个 Windows 程序

    Steam在Windows下运行时包含六个关键程序:主程序负责界面交互,Web Helper渲染网页内容,Client Service管理下载与同步,Installer处理更新,Authentication Agent执行登录认证,Overlay Host支持游戏内叠加层功能。 如果您在使用 Ste…

    2025年11月10日 系统教程
    100
  • 如何使用Layui框架开发一个支持富文本编辑器的网页编辑功能

    标题:使用Layui框架开发支持富文本编辑器的网页编辑功能 引言:在Web开发中,网页编辑功能是一个常见而重要的模块。为了提升用户体验,支持富文本编辑器是必不可少的。本文将介绍如何使用Layui框架中的富文本编辑器组件进行开发,并提供具体的代码示例。 一、Layui框架简介Layui是一个基于HTM…

    2025年11月9日 web前端
    000

发表回复

登录后才能评论
关注微信