溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時間：2021-04-25 14:40:31 來源：億速云 閱讀：147 作者：小新 欄目：編程語言

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

layui是什么

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

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

以下的例子是一個調(diào)用城市的實(shí)例，數(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ù)自己的實(shí)際需求加載對應(yīng)版本的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對應(yīng)的是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');
        });
   //調(diào)用數(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  //是否顯示復(fù)選框
        ,id: 'demoId1'
        ,isJump: false //是否允許點(diǎn)擊節(jié)點(diǎn)時彈出新窗口跳轉(zhuǎn)
        ,click: function(obj){
                       //var data = obj.data;  //獲取當(dāng)前點(diǎn)擊的節(jié)點(diǎn)數(shù)據(jù)
        var dump_url = obj.data.href;
        window.location.href = dump_url;
        //layer.msg('狀態(tài)：'+ obj.state + '<br>節(jié)點(diǎn)數(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;
}

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手