TP5.1+layui實現(xiàn)欄目數(shù)的調(diào)用

整合layui+tp5.1時,有時候需要調(diào)用欄目數(shù),這就需要進行數(shù)據(jù)的動態(tài)化調(diào)用,之前試過很多種方法,都沒有生效,后面查看了js數(shù)據(jù)調(diào)用的方法,結(jié)合layui進行多次嘗試,終于找出了能夠?qū)崿F(xiàn)這一功能的方法,希望對大家有用。

以下的例子是一個調(diào)用城市的實例,數(shù)據(jù)庫字段包括:id,order(排序),pid(上級城市ID)、name(城市名稱),這里包含了省級、市級、縣/區(qū)級三級城市。

第一步:根據(jù)Layui給出的方法,首先寫出HTML頁面,如下所示:

其中___ADMIN__是你自己配置的樣式路徑,修改成自己的路徑即可。另外由于這里調(diào)用數(shù)據(jù)采用的是js數(shù)據(jù)調(diào)用,所以需要加載jquery庫,我這里用的是jquery-3.2.1,大家可以根據(jù)自己的實際需求加載對應(yīng)版本的jquery庫,這里不多說,直接上代碼:

【HTML】

nbsp;html&gt;   ???<meta> ???<title>Title</title> ???<link> ???<link> ???<script></script><!--test12對應(yīng)的是layuitree.render中的elem值,這兩個值必須一致--><div></div> <script> layui.use([&#39;form&#39;,&#39;layer&#39;,&#39;element&#39;,&#39;tree&#39;, &#39;util&#39;],function(){        $ = layui.jquery;         var form = layui.form         ,layer = layui.layer;         var tree = layui.tree         ,util = layui.util;         var element = layui.element;         form.on(&#39;checkbox(checkeds)&#39;, function(data){            if(data.elem.checked){                $(&#39;.checkone&#39;).prop(&#39;checked&#39;,true);         }else{                $(&#39;.checkone&#39;).prop(&#39;checked&#39;,false);         }            form.render(&#39;checkbox&#39;);         });    //調(diào)用數(shù)據(jù)     $(document).ready(function(){            $.get(&#39;{:url("getCategoryList")}&#39;).done(function (data) {                var arr =$.parseJSON(data);         //alert(arr);         tree.render({                    elem: &#39;#test12&#39;         ,data: arr                    ,showCheckbox: false  //是否顯示復(fù)選框         ,id: &#39;demoId1&#39;         ,isJump: false //是否允許點擊節(jié)點時彈出新窗口跳轉(zhuǎn)         ,click: function(obj){                        //var data = obj.data;  //獲取當(dāng)前點擊的節(jié)點數(shù)據(jù)         var dump_url = obj.data.href;         window.location.href = dump_url;         //layer.msg(&#39;狀態(tài):&#39;+ obj.state + &#39;<br>節(jié)點數(shù)據(jù):&#39; +                                 JSON.stringify(data));         }                });         })        }); }); </script>

第二步:書寫后臺PHP代碼,這里我是根據(jù)TP5.1 的規(guī)則書寫的代碼

【PHP代碼】

//獲取欄目信息 public?function?getCategoryList(){ ???$id?=?Request::param('id'); ???$parentId?=?$this-&gt;getAllParentId($id);//獲取父級ID信息 ???$list?=?AreaModel::where('pid',100000) ???????-&gt;where('status',0) ???????-&gt;order('order?asc') ???????-&gt;select(); ???$cate?=?array(); ???foreach?($list?as?$key=&gt;$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']) ???????????-&gt;where('status',0) ???????????-&gt;order('order?asc') ???????????-&gt;select(); ???????if($child){ ???????????foreach?($child?as?$key1=&gt;$c){ ???????????????/*$cate[$key]['children'][]?=?array( ???????????????????'title'?=&gt;?$c['c_name'], ???????????????????'id'?=&gt;?$c['id'], ???????????????????'href'?=&gt;?"/yejuzhi/article/index?cid=".$c['id'], ???????????????????'children'?=&gt;?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']) ???????????????????-&gt;where('status',0) ???????????????????-&gt;order('order?asc') ???????????????????-&gt;select(); ???????????????foreach?($child1?as?$key2=&gt;$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)-&gt;find(); ???if($cates['pid']==0){ ???????$parentId[]?=?$cates['id']; ???} ???$list?=?AreaModel::where('status',0) ???????-&gt;order('order?asc') ???????-&gt;select(); ???foreach?($list?as?$k?=&gt;?$v)?{ ???????if?($cates['pid']?==?$v['id'])?{ ???????????$parentId[]?=?$v['id']; ???????????$this-&gt;getAllParentId($v['id']); ???????} ???} ???return?$parentId; }

大家可以試一下,希望能夠給與大家?guī)椭N疫@里是對城市信息的循環(huán)輸出,大家也可以嘗試進行其他信息的輸出,只需要修改數(shù)據(jù)調(diào)用規(guī)則即可,但是需要注意的是,不管如何調(diào)用父級、子級是必須要存在的。

謝謝!

相關(guān)推薦:最新的10個thinkphp視頻教程

? 版權(quán)聲明
THE END
喜歡就支持一下吧
點贊12 分享