2017-12-30 81 views
0

3 단계로 mysql 데이터베이스에서 json 메뉴를 가져와야합니다. 나는 1 레벨과 2 레벨을 얻고있다. 3 단계를 표시해야합니다. 인덱스 페이지와 categories.php 및 실제 treeview와 현재 결과를 추가하고 데이터베이스 레코드를 데이터베이스에서 추출합니다.PHP mysql 데이터베이스에서 세 번째 수준의 하위 메뉴를 추가하십시오.

실제 메뉴 트리에 표시된대로 데이터베이스에서 3 단계로 메뉴를 완성하려면 어떻게해야합니까?

categories.php

<?php 

include('db.php'); 
$sql = mysqli_query($db,"select cat_id,product from category where parent_id=0"); 
// parent_id categories node 
$categories = array("Categories" => array()); 

while ($row = mysqli_fetch_array($sql,MYSQLI_ASSOC)) { 
    $cat_id = $row['cat_id']; 
    $ssql = mysqli_query($db,"select cat_id,product from category where parent_id='$cat_id'"); 



    // single category node 
    $category = array(); // temp array 
    $category["cat_id"] = $row["cat_id"]; 
    $category["product"] = $row["product"]; 
    //$category["media"] = $row["media"]; 
    $category["sub_categories"] = array(); // subcategories again an array 

    while ($srow = mysqli_fetch_array($ssql,MYSQLI_ASSOC)) { 
     $subcat = array(); // temp array 
     $subcat["cat_id"] = $srow['cat_id']; 
     $subcat["product"] = $srow['product']; 
     // pushing sub category into subcategories node 
     array_push($category["sub_categories"], $subcat); 
    } 

    // pushing sinlge category into parent_id 
    array_push($categories["Categories"], $category); 
} 
echo ((isset($_GET['callback'])) ? $_GET['callback'] : "") . '(' . json_encode($categories) . ')'; 
?> 

index.html을

<!DOCTYPE html> 
<html> 
<head> 
    <title>Menu</title> 
    <style> 
     body{background-color:#f2f2f2} 
     h3{ font-family: "arial","sans-serif"; color: #E47911;margin:0px; padding:0px } 
     .shadow { 


      -moz-box-shadow: 0px 0px 5px #999; 
      -webkit-box-shadow: 0px 3px 5px #999; 
      box-shadow: 0px 0px 5px #999; 

     } 
     #menu_ul, #submenu_ul { 
      left: 0; 
      list-style-type: none; 
      margin: 0; 
      padding: 0; 
      position: absolute; 
      top: 0; 
      padding:15px; 
      width:170px; 
     } 
     #submenu_ul{margin-top:25px; width:270px;} 
     #menu_ul li, #submenu_ul li 
     { 
      color: #333333; 
      cursor: pointer; 

      font-family: "arial","sans-serif"; 
      font-size: 12px; 
      line-height: 16px; 
      margin: 0; 
      padding: 10px 0 10px; 


     } 
     #menu_ul li:active, #menu_ul li:hover 
     { 
      color: #E47911; 
      font-weight: bold; 
      background: url("images/arrow.png") no-repeat right; 

     } 
     #submenu_ul li:active, #submenu_ul li:hover 
     { 
      color: #E47911; 
      font-weight: bold; 
     } 



     #menu_box 
     { 
      border-top:solid 3px #333;border-left:solid 1px #dedede;border-right:solid 1px #dedede;border-bottom:solid 1px #dedede;min-height:510px;width:200px;background-color:#fff;margin-left:20px;float:left;position:relative;z-index:300 
     } 
     #menu_slider 
     { 
      border-top:solid 3px #333;border-left:solid 1px #dedede;border-right:solid 1px #dedede;border-bottom:solid 1px #dedede;min-height:480px;background-color:#fff;margin-left:220px;position:absolute;width:200px;position:relative;z-index:200;display:none;padding:15px 
     } 
     .hidebox, .hideul{display:none} 
    </style> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
    <script type="text/javascript" > 
     $(document).ready(function() 
     { 
      $.getJSON("categories.php?callback=?", function(data) 
      { 

       $.each(data.Categories, function(i, category) 
       { 

        var subjsondata=''; 
        $.each(category.sub_categories, function(i, sub_categories) 
        { 

         subjsondata += "<li>"+sub_categories.product+"</li>"; 
       }); 

        var jsondata ="<li id='"+category.cat_id+"' class='category'>"+category.product+"<ul id='hide"+category.cat_id+"' class='hideul' >"+subjsondata+"</ul></li>"; 

        $(jsondata).appendTo("#menu_ul"); 
       }); 
      } 
     ); 





      $(".category").live('mouseover',function(event){ 

       $("#menu_slider").show(); 
       var D=$(this).html(); 
       var id=$(this).attr('id'); 

       var V=$("#hide"+id).html(); 
       var M=$("#hide"+id).attr("media"); 
       $("#submenu_ul").html(V); 
       $("#menu_slider h3").html(D); 
     if(M!='null') 
     { 
     $("#menu_slider").css({"width": "200px"}); 
     } 
     else 
     { 
     $("#menu_slider").css({"width": "200px"}); 
     } 
     $("#menu_slider").css('background', 'url(backgrounds/' + M + ') #ffffff no-repeat right bottom'); 
     }); 

      //Document Click 
      $(document).mouseup(function() 
      { 
      $("#menu_slider").hide(); 

      }); 

      //Mouse click on sub menu 
      $("#menu_slider").mouseup(function() 
      { 
      return false 
      }); 

      //Mouse click on my account link 
      $("#menu_box").mouseup(function() 
      { 
      return false 
      }); 




     }); 

    </script> 
</head> 
<body> 


    <div id='menu_box' class='shadow'> 
     <ul id='menu_ul'> 
     </ul> 
    </div> 
    <div id='menu_slider' class='sshadow'> 
     <h3></h3> 
     <ul id='submenu_ul'> 
     </ul> 

    </div> 
</body> 
</html> 

실제 트 리뷰는 :

enter image description here

이것은 내가 지금 결과를 얻고 것입니다. MySQL 데이터베이스에서

result

추출 :

enter image description here

+0

당신은 하나를 작성해야합니다 같은 방법을 사용할 수 있습니다 JS를 들어 while while insi de second while 루프를 사용하여 하위 하위 카테고리를 가져옵니다. 그런 다음 세 번째 하위 메뉴의 값을 가져옵니다. –

+0

실제로 루프 while while while while 루프를 작성하지 못했습니다. 만약 당신이 도움을 plz .. –

+0

이 솔루션을 체크 아웃 https://stackoverflow.com/questions/3116330/recursive-categories-with-a-single-query와 재귀적인 SQL 쿼리를 없애 버려. – Nope

답변

1

PHP :

function getCategories($db,$parent_id = 0){ 
    $categories = []; 
    $sql = mysqli_query($db,"select cat_id,product from category where parent_id='$parent_id'"); 
    while ($row = mysqli_fetch_array($sql,MYSQLI_ASSOC)) { 

    // single category node 
     $category = array(); // temp array 
     $category["cat_id"] = $row["cat_id"]; 
     $category["product"] = $row["product"]; 
     //$category["media"] = $row["media"]; 
     $category["sub_categories"] = getCategories($db,$row["cat_id"]); //  subcategories again an array 
     $categories[] = $category; 
    } 
    return $categories; 
} 


$categories = array("Categories" => getCategories($db,0)); 

echo ((isset($_GET['callback'])) ? $_GET['callback'] : "") . '' . json_encode($categories) . ''; 

JS : 당신이