从php mysql数据库添加3级子菜单

Question

I need to get json menu from mysql database with three levels. 我需要从mysql数据库中获取三个级别的json菜单。 I am getting 1st level and 2nd level. 我正在获得1级和2级。 I need to display 3rd level. 我需要显示3级。 I have added index page and categories.php and actual treeview and the current result what I am getting now and also extract from database for database records. 我添加了索引页和category.php和实际的treeview以及当前得到的当前结果，还从数据库中提取了数据库记录。

How can I get 3rd level from the database to complete the menu as I have shown in the actual menu tree? 如我在实际菜单树中所示，如何从数据库中获取第三级来完成菜单？

categories.php 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 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>

Actual treeview: 实际树状视图：

This is what I am getting result now. 这就是我现在得到的结果。

Extract from Mysql Database: 从Mysql数据库中提取：

Answer 1

php: 的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: For js you can use same approach js：对于js，您可以使用相同的方法

从php mysql数据库添加3级子菜单

问题描述

1 个解决方案

解决方案1
0 2018-01-05 09:54:30

从php mysql数据库添加3级子菜单

问题描述

1 个解决方案

解决方案1 0 2018-01-05 09:54:30

解决方案1
0 2018-01-05 09:54:30