php - 从多个 mysql 表构建 bootstrap 4 导航菜单-6ren

php - 从多个 mysql 表构建 bootstrap 4 导航菜单

转载作者：行者123 更新时间：2023-11-29 05:54:54

我想制作一个 bootstrap 4 导航菜单，我有以下 SQL 查询，下面有一些代码，但我不知道如何执行此操作!

这些是表格

TABLE menu
--------------------------------------
| id | title       | url             |
| 1  | Home        | index.php       |
| 2  | Menu        | #               |
| 3  | Contact     | #               |
| 2  | Winkelwagen | winkelwagen.php |
--------------------------------------

TABLE categories
-------------------------------------
| id | title_cat | url | cparent_id |
| 1  | Auto's    | #   | 2          |
| 2  | Drank     | #   | 2          |
-------------------------------------

TABLE products
-------------------------------------
| id | product  | url  | pparent_id |
| 1  | Ferrari  | #    | 1          |
| 2  | Heineken | #    | 2          |
-------------------------------------

这里是查询:

$query =    "SELECT
            X.level,
            X.id,
            X.name,
            X.url,
            X.parent_id
        FROM
            (
            SELECT
                1 AS LEVEL,
                id AS id,
                title AS NAME,
                url AS url,
                0 AS parent_id,
                id AS id_1,
                -1 AS id_2,
                -1 AS id_3
            FROM
                menu
            WHERE
                1
            UNION
        SELECT
            2 AS LEVEL,
            id AS id,
            title_cat AS NAME,
            url AS url,
            cparent_id AS parent_id,
            cparent_id AS id_1,
            id AS id_2,
            -1 AS id_3
        FROM
            categories
        WHERE
            1
        UNION
        SELECT
            3 AS LEVEL,
            products.id AS id,
            products.product AS NAME,
            products.url AS url,
            products.pparent_id AS parent_id,
            categories.cparent_id AS id_1,
            categories.id AS id_2,
            products.id AS id_3
        FROM
            products
        LEFT JOIN categories ON products.pparent_id = categories.id
        WHERE
            1
        ) X
        WHERE
            1
        ORDER BY
            id_1,
            id_2,
            id_3";

它给出了下表的级别(我也添加了 parent_id，但是 parent_id buildTree($array) 进入循环):

level   id  name        url             parent_id   
1       1   Home        index.php       0   
1       2   Menu        #               0   
2       1   Auto's      #               2   
3       1   Ferrari     #               1   
2       2   Drank       #               2   
3       2   Heineken    #               2   
1       3   Contact     contact.php     0   
1       4   Winkelwagen winkelwagen.php 0

我希望导航菜单看起来像这样:

        <li class="nav-item">
            <a class="nav-link" href="index.php">Home</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <div class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">Auto's</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Ferrari</a>
                    </div>
                </div>
                <div class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" href="#">Drank</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Heineken</a>
                    </div>
                </div>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="winkelwagen.php">Winkelwagen</a>
        </li>

我有以下代码，首先我们根据您在上面看到的获取的查询创建一个数组:

$sql = $pdo->prepare($query);

function menu_builder($sql) {
    if ($sql->execute()) {
        while ($row = $sql->fetch(PDO::FETCH_ASSOC)) {
            $array[] = $row;
        }
        buildTree($array); // or menu_builder($sql);
    }
}

下一个代码不起作用，因为它进入了无限循环(如果它起作用，我仍然需要使 html 正确 :):

function buildTree($array, $parent_id = 0, $parents = array()) {
    if($parent_id == 0) {
        foreach ($array as $element) {
            if (($element['parent_id'] != 0) && !in_array($element['parent_id'], $parents)) {
                $parents[] = $element['parent_id'];
            }
        }
    }
    $menu_html = '';
    foreach($array as $element) {
        if($element['parent_id'] == $parent_id) {
            if(in_array($element['id'], $parents)) {
                $menu_html .= '<li class="dropdown">';
                $menu_html .= '<a href="'.$element['url'].'" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">'.$element['name'].' <span class="caret"></span></a>';
            }
            else {
                $menu_html .= '<li>';
                $menu_html .= '<a href="' . $element['url'] . '">' . $element['name'] . '</a>';
            }
            if(in_array($element['id'], $parents)) {
                $menu_html .= '<ul class="dropdown-menu" role="menu">';
                $menu_html .= buildTree($array, $element['id'], $parents);
                $menu_html .= '</ul>';
            }
            $menu_html .= '</li>';
        }
    }
    return $menu_html;
}

而这个是正常的 <ul>/<li>我不知道如何使用 Bootstrap 让它为我工作的菜单:

function menu_builder($sql) {
    $level = 0;
    if ($sql->execute()) {
        while ($row = $sql->fetch(PDO::FETCH_ASSOC)) {
            while($level < $row['level']) {
                echo "<ul>" . PHP_EOL;
                $level++;
            }
            while($level > $row['level']) {
                echo "</ul>" . PHP_EOL;
                $level--;
            }
            echo "    <li>#" . $row['id'] . "->" . $row['name'] . "</li>" . PHP_EOL;
        }
    }
    while($level-- > 0) {
       echo "</ul>" . PHP_EOL;
    }
}

如果您需要更多信息，请问我，我尝试使用我正在尝试的代码和我正在使用的表格尽可能清楚地说明问题。

jQuery:

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
    if (!$(this).next().hasClass('show')) {
        $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
    }
    var $subMenu = $(this).next(".dropdown-menu");
    $subMenu.toggleClass('show');
    $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
        $('.dropdown-submenu .show').removeClass("show");
    });
    return false;
});

CSS:

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}

最佳答案

我选择了一种比递归 buildTree 更线性的方法。由于需要根据树的级别输出不同的 HTML，因此这种方式更容易一些。我创建了一个 SQLFiddle对于您的数据，我为测试目的添加了一些额外的值。查询发生变化，以便我可以在一行中查看菜单项是否有子菜单以及该子菜单是否有产品:

SELECT m.title AS title, m.url AS m_url,
       c.title_cat AS title_cat, c.url AS c_url,
       p.product AS product, p.url AS p_url
FROM menu m
LEFT JOIN categories c
ON c.cparent_id = m.id
LEFT JOIN products p
ON p.pparent_id = c.id
ORDER BY m.id, c.id, p.id

此查询的输出(基于扩展数据)是:

title           m_url           title_cat   c_url   product     p_url
Home            index.php       (null)      (null)  (null)      (null)
Menu            #               Auto's      #       Ferrari     www.ferrari.com
Menu            #               Auto's      #       Maserati    #
Menu            #               Drank       #       Heineken    #
Menu            #               Food        #       (null)      (null)
Second Menu     #               Hotels      #       The Ritz    www.ritzparis.com
Contact         contact.php     (null)      (null)  (null)      (null)
Winkelwagen     winkelwagen.php (null)      (null)  (null)      (null)

基本的查询调用保持不变，但我不是获取所有数据然后处理它，而是同时获取数据和处理它。

$sql = $pdo->prepare($query);
$sql->execute() or die("Unable to execute query!");
buildTree($sql);

buildTree 例程。我认为它的注释相当不言自明，但基本上它会遍历每一行数据并确定是否需要依次创建新菜单项、新子菜单或新子菜单项。

function buildTree($sql) {
    $thisTitle = '';
    $thisCategory = '';
    while ($element = $sql->fetch(PDO::FETCH_ASSOC)) {
        if (!$element['c_url']) {
            // simple top element
            // do we need to close any prior menus?
            if ($thisCategory != '') {
                echo "        </div>\n    </div>\n";
                $thisCategory = '';
            }
            if ($thisTitle != '') {
                echo "</li>\n";
                $thisTitle = '';
            }
            echo <<<EOD
<li class="nav-item">
    <a class="nav-link" href="{$element['m_url']}">{$element['title']}</a>
</li>

EOD;
        }
        else {
            // got a category
            // do we need a new menu item?
            if ($element['title'] != $thisTitle) {
                // is it the first menu item? if not, need to close the previous one
                if ($thisTitle != '') {
                    // do we also need to close a previous category menu?
                    if ($thisCategory != '') {
                        echo "        </div>\n    </div>\n";
                        $thisCategory = '';
                    }
                    echo "</li>\n";
                }
                $thisTitle = $element['title'];
                echo <<<EOD
<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="{$element['m_url']}" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">$thisTitle</a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">

EOD;
            }
            // do we need a new submenu?
            if ($element['title_cat'] != $thisCategory) {
                // is it the first submenu? if not, need to close the previous one
                if ($thisCategory != '') echo "        </div>\n";
                $thisCategory = $element['title_cat'];
                // create a submenu
                echo <<<EOD
        <div class="dropdown-submenu">
            <a class="dropdown-item dropdown-toggle" href="{$element['c_url']}">$thisCategory</a>

EOD;
            }
            // is there a product?
            if ($element['p_url']) {
                // create a product menu item
                echo <<<EOD
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="{$element['p_url']}">{$element['product']}</a>
            </div>

EOD;
            }
        }
    }
}

此代码对扩展数据的输出是:

<li class="nav-item">
    <a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <div class="dropdown-submenu">
            <a class="dropdown-item dropdown-toggle" href="#">Auto's</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="www.ferrari.com">Ferrari</a>
            </div>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Maserati</a>
            </div>
        </div>
        <div class="dropdown-submenu">
            <a class="dropdown-item dropdown-toggle" href="#">Drank</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Heineken</a>
            </div>
        </div>
        <div class="dropdown-submenu">
            <a class="dropdown-item dropdown-toggle" href="#">Food</a>
        </div>
    </div>
</li>
<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Second Menu</a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <div class="dropdown-submenu">
            <a class="dropdown-item dropdown-toggle" href="#">Hotels</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="www.ritzparis.com">The Ritz Paris</a>
            </div>
        </div>
    </div>
</li>
<li class="nav-item">
    <a class="nav-link" href="contact.php">Contact</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="winkelwagen.php">Winkelwagen</a>
</li>

关于php - 从多个 mysql 表构建 bootstrap 4 导航菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50355024/

文章推荐： Python MySQL 连接器 : caching_sha2_password plugin

文章推荐： ios - 在 GameViewController 中的 SKScene 后面显示 UIView

文章推荐： iOS - 保存到日志文件并稍后提取

文章推荐： php - 动态添加的表单字段 - pdo php mysql

android - Gradle 构建 VS Eclipse 构建
我在使用 gradle 构建一个特定应用程序时遇到问题。该应用程序可以用 eclipse 编译和构建，它在平板电脑上运行良好。当我尝试使用 Gradle 构建它时，“compileDebugJava”
c - 构建 C 程序的最佳实践(用于 CMake 构建)
我有一个 C 程序，是一位离开的开发人员留给我的。我试图弄清楚他到底在做什么，并将软件重新安排成更合乎逻辑的东西，这样我就可以更轻松地构建它。我正在使用 CMake 构建，而他使用的是 Make。有
gradle - 尝试 Gradle 构建 - 在根项目中找不到 "Task ' 构建“
我刚开始阅读“Pro Spring MVC with web flow”，它附带了一个我想遵循的代码示例。我要什么 - 我想像书中那样构建应用程序，使用 Gradle 有什么问题 - 我没用过 Gr
javascript - Teamcity 上的 Angular-cli 构建(ng 构建)
我希望有人已经这样做了。我正在尝试为我的一个 angular 2 项目在 teamcity 中建立一个连续的构建。在做了一些研究之后，我按照以下步骤操作: 构建步骤 1:为 teamcity 安装 j
c# - 使用 MSBuild 构建 ASP.Net 网站不同于 Visual Studio 构建
我有一个旧的 ASP.Net 网站解决方案，看起来像: 当我在 Visual Studio 中构建解决方案时，我得到以下输出: ------ Build started: Project: C:\..
gulp-useref 构建 concat 脚本和 css 但不替换 <--!构建 --> 在 html 中
我使用 gulp-usref、gulp-if、gulp-uglify、gulp-csso 和 gulp-file-include 来构建我的应用程序。除了 HTML 保持原样外，构建中的一切都运行良好
ios - ionic 构建 ios 成功，但 ionic 构建 ios --release 失败
我正在使用 ionic2 开发内部移动应用程序。我可以通过以下方式成功构建 ios: ionic build ios and ionic build ios --prod 但当我这样做时，它一直失败
entity-framework - 构建/构建 Azure 移动应用服务 Entity Framework 代码优先和 .NET APK 项目
我是一位经验丰富的 .NET/C# 开发人员，但对这里的几乎所有技术/库(包括 SQL/DB 工作)都是新手。我正在开发一个具有 Azure/Entity Framework .NET 后端和可移植
visual-studio-2008 - 可以使用 Visual Studio IDE 构建，但无法使用 devenv.com 构建
我正在使用 VS 2008。我可以使用 IDE 成功编译我的解决方案。但是，当我尝试使用 devenv.com 构建它时，它失败并提示“错误:找不到项目输出组'(无法确定名称)的输出”。该组、其配置或
node.js - Ember.js 2.7 不使用 yarn 构建 - 使用 npm 构建
版本: ember.js 2.7，ember-data 2.7 ember-cli 2.9.1//同样适用于 ember-cli 2.7 node 6.9.1, npm 3.10.9//也适用于 no
f# - 如何使用 Azure Devops Pipelines 构建 F# 项目？我收到错误 'The target "构建“项目中不存在”
我第一次修补 AzureDevops，设置一些 CI 任务。我有一个公共(public)存储库(开源)和一个包含 3 个 F# 项目的解决方案(.sln)。该解决方案在 Windows/Mac/Li
visual-studio-2008 - 有没有人已经完成了使用 VS2008 构建 STLPort 和/或使用 VS2005 构建 x64 的工作？
目前 5.1.5 版本或 STLPort CVS 存储库似乎仍不支持 VS2008。如果有人已经完成了这项工作，那么如果可能的话，分享会很有用:) 同样，了解 VS2005 或 2008 x64 构建
python - 为 Python 3.5 构建 Fortran 扩展或为 2.7 构建 C 扩展
我有一个 Python 2.7 项目，到目前为止一直使用 gfortran 和 MinGW 来构建扩展。我使用 MinGW，因为它似乎支持 Fortran 代码中的写入语句和可分配数组，而 MSVC
PHP安装\构建
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题？ Update the question所以它是on-topic对于堆栈溢出。 9年前关闭。 Improve this que
构建 Zimbra
我想知道为什么在 Zimbra Wiki 中只列出了构建过程的特定平台。这意味着不可能在其他 Linux 发行版上构建 Zimbra？ Zimbra 社区选择一个特殊的 Linux 发行版来构建 Zi
从命令行快速主运行/构建
我将在 Swift 中构建一个 CLI 工具。我用这个命令创建了项目 swift package init --type executable当我构建我的项目并解析时读取别名 Xcode 中的参数并
构建 docker 镜像的文件所有权
我想为添加到 docker 镜像的文件设置文件权限。我有这个简单的 Dockerfile: FROM ubuntu:utopic WORKDIR /app RUN groupadd -g 1000 b
构建 opencl 内核失败
当我使用 clBuildProgram在我的 OpenCl 代码中，它失败并显示错误代码 -11，没有任何日志信息。这是我的代码的样子: ret = clBuildProgram(program
多次调用 Flutter 构建
我有一个底部导航栏，它有一个列表页面，该页面使用状态块。 class _MainPageState extends State { int _index = 0; @override Wi
windows - 将更改推送到Github时如何自动触发Jenkins作业/构建
我在本地计算机上使用Jenkins(Jenkins URL未通过Internet公开，但该计算机上已启用Internet。) 我进行了以下配置更改: 在Jenkins工具上安装了Git和Github插

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

php - 从多个 mysql 表构建 bootstrap 4 导航菜单