0
私は3つのレベルでmysqlデータベースからjsonメニューを取得する必要があります。私は1レベルと2レベルを取得しています。私は第3レベルを表示する必要があります。インデックスページとcategories.phpと実際のツリービューと現在の結果を追加しました。またデータベースレコードのデータベースから抽出しました。PHPのmysqlデータベースから第3レベルのサブメニューを追加
実際のメニューツリーに表示されているように、データベースから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>
実際のツリービュー：
これは私が今の結果を取得していますものです。
MySQLデータベースから抽出：
同じアプローチを使用することができますjsのために より多くのwhileループinsi de second whileループを使用して任意の子サブカテゴリを取得します。次に、3番目のサブメニューの値を取得します。 –
実際にはwhileループを2番目のwhileループに書き込むことができません。もしあなたが助けてください.. –
このソリューションをチェックアウトhttps://stackoverflow.com/questions/3116330/recursive-categories-with-a-single-queryと再帰的なSQLクエリを取り除く。 – Nope