Bei der Integration von Layui+TP5.1
ist es manchmal notwendig, die Spaltennummer aufzurufen, was einen dynamischen Aufruf von Daten erfordert. Ich habe zuvor viele Methoden ausprobiert, aber keine davon hat funktioniert Die spätere Datenaufrufmethode wurde mit Laui kombiniert und viele Male ausprobiert. Schließlich wurde ein Weg gefunden, diese Funktion zu erreichen. Ich hoffe, dass sie für alle nützlich sein wird. 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
___ADMIN__
der von Ihnen konfigurierte Stilpfad ist, ändern Sie ihn Es geht einfach deinen eigenen Weg. Da der Datenaufruf hier außerdem js-Datenaufrufe verwendet, muss ich hier jquery-3.2
laden. Sie können die entsprechende Version von laden Tatsächlicher Bedarf. Jquery
-Bibliothek, hier gibt es nicht viel zu sagen, gehen Sie einfach zum Code: