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

這篇文章將為大家詳細講解有關TP5.1+layui怎么實現(xiàn)欄目數(shù)的調用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

目前成都創(chuàng)新互聯(lián)已為千余家的企業(yè)提供了網(wǎng)站建設、域名、雅安服務器托管、綿陽服務器托管、企業(yè)網(wǎng)站設計、西山網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

layui是什么

layui是一款采用自身模塊規(guī)范編寫的前端UI框架，它遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，適合新手，并且它還提供了豐富的內(nèi)置模塊，他們皆可通過模塊化的方式按需加載，從核心代碼到API的每一處細節(jié)都經(jīng)過精心雕琢，非常適合界面的快速開發(fā)，能夠作為PC網(wǎng)頁端后臺系統(tǒng)與前臺界面的速成開發(fā)方案。

整合Layui+TP5.1時，有時候需要調用欄目樹，這就需要進行數(shù)據(jù)的動態(tài)化調用，之前試過很多種方法，都沒有生效，后面查看了JS數(shù)據(jù)調用的方法，結合layui進行多次嘗試，終于找出了能夠實現(xiàn)這一功能的方法，希望對大家有用。

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

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

其中___ADMIN__是你自己配置的樣式路徑，修改成自己的路徑即可。另外由于這里調用數(shù)據(jù)采用的是js數(shù)據(jù)調用，所以需要加載jquery庫，我這里用的是jquery-3.2.1，大家可以根據(jù)自己的實際需求加載對應版本的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');
        });
   //調用數(shù)據(jù)
    $(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 //是否允許點擊節(jié)點時彈出新窗口跳轉
        ,click: function(obj){
                       //var data = obj.data;  //獲取當前點擊的節(jié)點數(shù)據(jù)
        var dump_url = obj.data.href;
        window.location.href = dump_url;
        //layer.msg('狀態(tài)：'+ obj.state + '<br>節(jié)點數(shù)據(jù)：' +                                 JSON.stringify(data));
        }
               });
        })
       });
});
</script>
</body>
</html>

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

【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;
}

關于“TP5.1+layui怎么實現(xiàn)欄目數(shù)的調用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

分享標題：TP5.1+layui怎么實現(xiàn)欄目數(shù)的調用
鏈接地址：http://jinyejixie.com/article30/psidpo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設計公司、網(wǎng)站建設、虛擬主機、App設計、移動網(wǎng)站建設、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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

layui是什么