0

0

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

XuPing.Yang

XuPing.Yang

发布时间:2021-04-25 11:13:23

|

1791人浏览过

|

来源于php中文网

原创

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

永利在线企业网站管理系统(CMS)1.0 Build 20100612
永利在线企业网站管理系统(CMS)1.0 Build 20100612

修正说明:1,实现真正的软件开源。2,安装界面的美化3,真正实现栏目的递归无限极分类。4,后台添加幻灯片图片的管理,包括添加,修改,删除等。5,修正添加新闻的报错信息6,修正网站参数的logo上传问题7,修正产品图片的栏目无限极分类8,修正投票系统的只能单选问题9,添加生成静态页功能10,添加缓存功能特点和优势1. 基于B/S架构,通过本地电脑、局域网、互联网皆可使用,使得企业的管理与业务不受地域

下载

【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视频教程

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

6

2026.02.28

Golang 工程化架构设计:可维护与可演进系统构建
Golang 工程化架构设计:可维护与可演进系统构建

Go语言工程化架构设计专注于构建高可维护性、可演进的企业级系统。本专题深入探讨Go项目的目录结构设计、模块划分、依赖管理等核心架构原则,涵盖微服务架构、领域驱动设计(DDD)在Go中的实践应用。通过实战案例解析接口抽象、错误处理、配置管理、日志监控等关键工程化技术,帮助开发者掌握构建稳定、可扩展Go应用的最佳实践方法。

6

2026.02.28

Golang 性能分析与运行时机制:构建高性能程序
Golang 性能分析与运行时机制:构建高性能程序

Go语言以其高效的并发模型和优异的性能表现广泛应用于高并发、高性能场景。其运行时机制包括 Goroutine 调度、内存管理、垃圾回收等方面,深入理解这些机制有助于编写更高效稳定的程序。本专题将系统讲解 Golang 的性能分析工具使用、常见性能瓶颈定位及优化策略,并结合实际案例剖析 Go 程序的运行时行为,帮助开发者掌握构建高性能应用的关键技能。

8

2026.02.28

Golang 并发编程模型与工程实践:从语言特性到系统性能
Golang 并发编程模型与工程实践:从语言特性到系统性能

本专题系统讲解 Golang 并发编程模型,从语言级特性出发,深入理解 goroutine、channel 与调度机制。结合工程实践,分析并发设计模式、性能瓶颈与资源控制策略,帮助将并发能力有效转化为稳定、可扩展的系统性能优势。

14

2026.02.27

Golang 高级特性与最佳实践:提升代码艺术
Golang 高级特性与最佳实践:提升代码艺术

本专题深入剖析 Golang 的高级特性与工程级最佳实践,涵盖并发模型、内存管理、接口设计与错误处理策略。通过真实场景与代码对比,引导从“可运行”走向“高质量”,帮助构建高性能、可扩展、易维护的优雅 Go 代码体系。

17

2026.02.27

Golang 测试与调试专题:确保代码可靠性
Golang 测试与调试专题:确保代码可靠性

本专题聚焦 Golang 的测试与调试体系,系统讲解单元测试、表驱动测试、基准测试与覆盖率分析方法,并深入剖析调试工具与常见问题定位思路。通过实践示例,引导建立可验证、可回归的工程习惯,从而持续提升代码可靠性与可维护性。

2

2026.02.27

漫蛙app官网链接入口
漫蛙app官网链接入口

漫蛙App官网提供多条稳定入口,包括 https://manwa.me、https

130

2026.02.27

deepseek在线提问
deepseek在线提问

本合集汇总了DeepSeek在线提问技巧与免登录使用入口,助你快速上手AI对话、写作、分析等功能。阅读专题下面的文章了解更多详细内容。

8

2026.02.27

AO3官网直接进入
AO3官网直接进入

AO3官网最新入口合集,汇总2026年可用官方及镜像链接,助你快速稳定访问Archive of Our Own平台。阅读专题下面的文章了解更多详细内容。

208

2026.02.27

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP5.1企业站点快速开发
ThinkPHP5.1企业站点快速开发

共30课时 | 5.7万人学习

TP5.1博客后台视频教程
TP5.1博客后台视频教程

共8课时 | 0.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号