整合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'][] = 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實現欄位數的調用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

如何利用Layui实现图片轮播图功能现如今,图片轮播图已经成为了网页设计中常见的元素之一。它可以使网页更加生动活泼,吸引用户的眼球,提升用户体验。在本文中,我们将介绍如何利用Layui框架来实现一个简单的图片轮播图功能。首先,我们需要在HTML页面中引入Layui的核心文件和样式文件:<linkrel="stylesheet"h

以下为大家整理了前端UI框架 — layui的视频教程,不需要从迅雷、百度云之类的第三方网盘平台下载,全部在线免费观看。教程由浅入深,有前端基础的人就能学习,从安装到案例讲解,全面详细,帮助你更快更好的掌握layui框架!

如何利用Layui开发一个具有分页功能的数据展示页面Layui是一个轻量级的前端UI框架,提供了简洁美观的界面组件和丰富的交互体验。在开发中,我们经常会遇到需要展示大量数据并进行分页的情况。以下是一个利用Layui开发的具有分页功能的数据展示页面的示例。首先,我们需要引入Layui的相关文件和依赖。在html页面的<head>标签中加入以下代

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

如何利用Layui实现图片反色和亮度调节功能引言:在前端开发中,经常会遇到需要对图片进行特效处理的情况。本文将介绍如何利用Layui框架实现图片反色和亮度调节功能,并提供具体代码实例供参考。一、Layui简介:Layui是一款优秀的前端UI框架,具有简洁、美观、易用等特点。它提供了丰富的前端组件,让开发者能够轻松搭建出精美的网站。二、准备工作:在开始之前,我

如何使用Layui开发一个支持文件上传和下载的资源管理系统引言:随着互联网的发展,数据资源的管理已经成为一项重要的任务。无论是企业内部的文档管理,还是个人的文件存储,都需要一个高效且易于使用的资源管理系统。Layui是一款轻量级的前端框架,具有简洁明了的设计以及丰富的组件库,非常适合用来进行资源管理系统的开发。本文将介绍如何使用Layui开发一个支持文

如何使用Layui开发一个支持图片放大缩小的相册功能相册功能在现代的网页应用中非常常见,通过展示用户上传的图片,让用户能够方便地浏览和管理图片。为了提供更好的用户体验,一种常见的需求是支持图片的放大和缩小功能。本文章将介绍如何使用Layui框架开发一个支持图片放大缩小的相册功能,同时提供具体的代码示例。首先,确保您已经引入Layui框架的CSS和JS文件。您

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


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

Dreamweaver CS6
視覺化網頁開發工具

SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能

mPDF
mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),