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

相关推荐

  • 如何使用 CSS 节点选择器定位展开状态无类名的 标签?

    关于 css 节点选择器的一个问题 在 html 代码中,我们有一个带有展开状态的导航菜单项。每个选项都包含一个没有任何类名的 标签。 现在,我们希望使用 css 选择器来定位展开状态的 标签,而不给它添加任何类名。如何实现此操作呢? 答案 立即学习“前端免费学习笔记(深入)”; 要通过父级元素 .…

    2025年12月24日
    000
  • 如何选中特定 HTML 元素中第一个非特定类名的子元素?

    关于 css 节点选择器的疑问 想要选中特定 html 元素中的特定子元素,可以使用 css 节点选择器。本例中,我们需要选中一个不包含特定类名的 元素,该元素是其父 元素的第一个子元素。 选择器解决方案: 为了满足要求,可以使用以下选择器: 立即学习“前端免费学习笔记(深入)”; .layui-n…

    2025年12月24日
    000
  • 如何使用 CSS 选择器精准选择嵌套元素?

    如何使用 css 选择器精准选择嵌套元素而不影响其他相邻元素? 在给定的 html 结构中, 元素包含一个 元素,后者内部嵌套了 元素和其他子元素。问题在于想要只通过父级 元素来选择默认展开状态的 元素,而不影响其他 元素。 为了解决这个问题,可以使用以下 css 选择器: .layui-nav-i…

    2025年12月24日
    000
  • 如何用 CSS 节点选择器选中指定父元素中的特定 a 元素?

    关于一个 css 节点选择器的问题 在询问如何使用 css 节点选择器选中特定 a 元素的场景中,我们需要具体了解该元素的父级结构和特征。 根据问题中提供的 html 代码,该 a 元素位于一个带有 class 为 “layui-nav-item layui-nav-itemed&#82…

    2025年12月24日
    000
  • 如何便捷地在实验室系统中录入和显示Latex公式?

    在实验室系统中轻松录入和显示latex公式 本文介绍一种在基于Layui和Spring的实验室系统中高效处理LaTeX公式输入和显示的方法,有效解决字体依赖导致的兼容性问题。系统原先使用自定义字体eudc.ttf显示特殊字符,但导出Word文档和跨平台兼容性需求促使我们寻找更优方案。虽然后台已能用p…

    2025年12月22日
    000
  • Layui Tab标签页右键菜单为何无法在文字区域触发?

    layui tab标签页右键菜单文字区域失效的修复方案 许多后台管理系统使用Layui框架和第三方tabrightmenu组件创建标签页右键菜单,实现刷新、关闭等功能。然而,有时右键点击标签页标题空白区域可以正常触发菜单,但点击文字区域却无效。本文将提供一种解决方案,无需修改tabrightmenu…

    2025年12月22日
    000
  • 如何在实验室系统中便捷地输入和显示LaTeX公式?

    在实验室系统中轻松输入和显示latex公式 本文探讨如何在基于Layui+Spring的实验室系统中,方便用户输入和显示LaTeX公式。系统原先使用自定义字体eudc.ttf,但导出Word文档时需要用户额外安装字体,因此需改进。后台已采用poi-tl-ext包处理LaTeX公式导出,前端使用Mat…

    2025年12月22日
    000
  • Layui标签页右键菜单为何无法在文字区域触发?

    layui标签页右键菜单失效?轻松解决文字区域无法触发难题! 本文针对Layui框架结合第三方tabrightmenu插件构建的后台管理系统标签页中,右键菜单仅在标题空白区域有效,点击标题文字区域却无法触发的问题,提供解决方案。 问题分析: 问题源于标签内包含的和*标签阻止了右键事件的传播。由于项目…

    2025年12月22日
    000
  • 如何在实验室系统中实现Latex公式的便捷输入?

    在实验室系统中轻松输入和显示latex公式 本文介绍如何在基于Layui和Spring的实验室系统中,便捷地输入和显示LaTeX公式,同时避免字体依赖导致的兼容性问题。 之前的方案建议使用外部字体文件,但这会增加用户负担,并影响Word文档导出。因此,我们采用LaTeX语法结合MathJax渲染的方…

    2025年12月22日
    000
  • 如何在实验室系统中便捷录入并显示Latex公式?

    实验室系统latex公式便捷录入与显示方案 本文针对在实验室系统(layui+spring)中便捷录入和显示Latex公式的问题,提出一种高效易用的解决方案。 原方案采用MathJax渲染,但用户需掌握Latex语法,存在使用门槛。 因此,我们建议采用一种更用户友好的方法:利用在线Latex编辑器。…

    2025年12月22日
    000
  • 如何在实验室系统中便捷地录入和显示LaTeX公式?

    实验室系统latex公式便捷录入与显示方案 本文针对基于Layui和Spring的实验室系统,提出一种在不增加额外字体文件和依赖包的前提下,实现LaTeX公式便捷录入和显示的方案。系统当前使用MathJax渲染公式,并通过poi-tl-ext导出Word文档,但用户输入公式的方式不够友好。 直接在页…

    2025年12月22日
    000
  • Layui Tab页切换导致Table表格显示异常怎么办?

    layui tab页切换导致table表格显示异常的解决方法 在使用Layui框架时,Tab页切换可能会导致Table表格显示异常,例如内容不完整或布局混乱。本文针对此问题提供分析和解决方案。 用户反馈显示,在切换到特定Tab页(例如“营销机会”)时,表格出现异常,但关闭后再打开则恢复正常。这很可能…

    2025年12月22日
    000
  • Layui Tab切换导致表格显示异常怎么办?

    layui tab切换导致表格显示异常的解决方案 在使用Layui框架时,Tab页切换可能导致表格显示异常,例如表格内容错乱或部分数据缺失。 这通常并非Layui框架本身的bug,而是由于渲染机制、DOM操作或浏览器缓存等因素造成的冲突。 问题表现:切换到特定Tab页(例如“营销机会”)时,表格显示…

    2025年12月22日
    000
  • Layui Tab切换时表格显示异常,如何排查和解决?

    layui tab切换导致table表格显示异常的排查与解决 在使用Layui框架时,Tab切换可能导致Table表格显示异常。本文分析一个案例:切换到“营销机会”标签页时表格显示错误,但关闭后重新打开则恢复正常。此现象表明问题并非数据本身,而是Layui框架在Tab切换过程中的渲染或DOM操作问题…

    2025年12月22日
    000
  • JavaScript和CSS实现点击翻书页效果时,如何解决图片消失和背面显示错误的问题?

    使用 javascript 和 css 实现点击翻书页的效果 如何在使用 JavaScript 和 CSS 实现点击翻书页的效果时遇到问题? 问题描述: 当点击书本封面时,书籍图片消失。当翻到背面时,呈现的是书的封面而不是背面。需要实现正常翻页效果,点击不消失图片,翻到背面时是其背面而不是封面。 解…

    好文分享 2025年12月22日
    000
  • Layui中layer弹出层:第二个按钮点击关闭窗口是什么原因?

    使用layui的layer弹出层时,如果自定义了两个按钮,第二个按钮点击后直接关闭窗口,这是因为layui的layer弹出层默认行为会在点击自定义按钮后自动关闭窗口。 解决方法: 为了阻止默认的关闭行为,需要在第二个按钮的回调函数中添加 return false;。这将阻止layer弹出层的默认关闭…

    2025年12月22日
    000
  • Layui Tab标签页右键菜单失效:cite和i标签如何解决?

    tab标签页,右键不能触发右键菜单问题 背景介绍 在使用layui和element搭建的后台管理系统中,需要给某个标签页添加右键刷新和关闭功能,但发现右键只能触发在非文字区域,无法在文字区域触发。 问题原因 查询代码发现,无法触发右键的元素是cite和i标签,且这两个标签不能删除,必须同时存在。 解…

    2025年12月22日
    000
  • layui-tabrightmenu 插件右键菜单无法在文字区域触发的原因是什么?

    非标题区域中的右键菜单不可触发 在使用 layui-tabrightmenu 插件实现了右键菜单触发功能时,发现只有空白处可以触发右键菜单,而文字区域无法触发。 原因分析 经分析发现,这是由于 li 标签中存在 cite 和 i 标签,在默认情况下,这些元素会阻止右键事件传递到文本内容上。 解决方案…

    2025年12月22日
    000
  • layui 标签页标题文本区域无法右键触发菜单,如何解决?

    tab标签页,右键不能触发右键菜单,求各位前端大佬帮忙 ?> 问题: 在使用layui框架管理标签页时,在标签页标题的文本部分右键点击无法触发右键菜单,只有在标签页标题的空白区域才能触发。 原因: 问题原因是标签页标题中的cite和i标签会阻止右键事件的触发。 解决方案: 虽然不能直接删除这些…

    2025年12月22日
    100
  • Layui Tab 标签页标题右键菜单失灵:如何解决 元素阻止事件传播?

    初看困惑:右键菜单失灵 在使用 layui 构建 Tab 标签页时,研发人员遇到一个棘手的问题:包含文本的 Tab 标题无法触发右键菜单。 问题分析:阻止事件传播 究其原因,由于 Tab 标题中嵌套了 和 元素,这些元素阻止了右键事件传播到 li 元素。通过删除这些元素,右键菜单即可正常触发。 无奈…

    2025年12月22日
    000

发表回复

登录后才能评论
关注微信