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

Posted 2023-02-24

技术标签:

【中文标题】从多个 mysql 表构建 bootstrap 4 导航菜单【英文标题】：Build boostrap4 navmenu from multiple mysql tables 【发布时间】：2018-10-25 13:43:50 【问题描述】：

我想做一个 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> 菜单，我不知道如何通过引导程序让它为我工作：

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;

【问题讨论】：

【参考方案1】：

我选择了一种比您的递归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 例程。我认为它对 cmets 来说是相当不言自明的，但基本上它会遍历每一行数据并确定是否需要依次创建新的菜单项、新的子菜单或新的子菜单项。

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>

【讨论】：

非常感谢，这比我尝试做的所有事情都更有意义！很高兴。很高兴能帮上忙。【参考方案2】：

试试这个

<?php
$servername = "localhost";
$username = "root";
$password = "";

try 
    $pdo = new PDO("mysql:host=$servername;dbname=testing", $username, $password);
// set the PDO error mode to exception
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 catch (PDOException $e) 
echo "Connection failed: " . $e->getMessage();


$querySubmenu = "SELECT a.id, a.title, a.url, b.title_cat AS cat_name, b.url AS cat_url, c.product AS product_name, c.url AS product_url FROM menu a
JOIN (SELECT * FROM categories) b ON a.id = b.cparent_id
JOIN (SELECT * FROM products) c ON b.id = c.pparent_id";

$queryMenu = "SELECT a.*, 0 AS cat_name, 0 AS cat_url, 0 AS product_name, 0 AS product_url FROM menu a WHERE id NOT IN (
SELECT a.id FROM menu a
JOIN (SELECT * FROM categories) b ON a.id = b.cparent_id
JOIN (SELECT * FROM products) c ON b.id = c.pparent_id)";


$sqlMenu = $pdo->prepare($queryMenu);
$sqlSubmenu = $pdo->prepare($querySubmenu);

$menu = menu_builder($sqlMenu);
$submenu = menu_builder($sqlSubmenu);

$arr = array_merge($menu, $submenu);

usort($arr, function ($a, $b) 
return $a['id'] - $b['id'];
);

function menu_builder($sql)

    if ($sql->execute()) 
        while ($row = $sql->fetch(PDO::FETCH_ASSOC)) 
            $array[] = $row;
        
        return $array;
    


foreach ($arr as $element) 
    if ($element['cat_name'] == '0')  ?>
    <li class="nav-item">
        <a class="nav-link" href="<?php echo $element['url'] ?>"><?php echo $element['title'] ?></a>
    </li>
    <?php 
    if ($element['cat_name'] != '0')  ?>
    <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"><?php echo $element['title'] ?></a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <div class="dropdown-submenu">
                <a class="dropdown-item dropdown-toggle" href="<?php echo $element['cat_url'] ?>"><?php echo $element['cat_name'] ?></a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="<?php echo $element['product_url'] ?>"><?php echo $element['product_name'] ?></a>
                </div>
            </div>
        </div>
    </li>
<?php 

?>

【讨论】：

【参考方案3】：

我认为让这件事变得困难的部分原因是试图将创建数据结构与演示相结合。通常最好先构建数据，然后再考虑如何呈现。

我尽我所能将其分解为单独的步骤。我添加了一些注释掉的 print_r 语句，这样你就可以看到每个步骤在做什么。如果您对此有任何疑问，请告诉我。

#!/usr/bin/php
<?php

// The query results
$results = [
    // Level, id, title, link, parent
    [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],
];

// creates a constant for the query result row keys (you should avoid using a global constant for this)
define('KEYS', ['level', 'id', 'title', 'link', 'parent_id']);

// adds the keys to each result row (this is just to help readability/maintainability)
$rows = array_map(function (array $item): stdClass 
  // cast this as an object so we don't have to use pass by reference later (I think this improves readability).
  return (object)array_combine(KEYS, $item);
, $results);

// uncomment to see raw $rows
//print_r($rows);die;

// creates a key for each row based on the level and id (this way they will be unique)
$keys = array_map(function (stdClass $row): string 
  $key = "$row->level-$row->id";
  $row->key = $key;
  return $key;
, $rows);

$keyed = array_combine($keys, $rows);

// uncomment to see $keyed values
//print_r($keyed);die;

// converts the keyed records into a tree.
$tree = [];
foreach($keyed as $item) 
  if (1 === $item->level) 
      $tree[] = $item;
      continue;
  

  $parent = ($item->level - 1).'-'.$item->parent_id;

  if (!isset($keyed[$parent])) 
    throw new Exception("could not find parent element '$parent'");
  

  $keyed[$parent]->children[] = $item;


// uncomment to see $tree structure
//print_r($tree);die;

?>
<!-- add ul classes for style -->
<ul>
  <?php foreach ($tree as $trunk): ?>
    <?php if (!isset($trunk->children)): ?>
      <li class="nav-item">
        <a class="nav-link" href="<?=$trunk->link?>"><?=$trunk->title?></a>
      </li>
    <?php else: ?>
      <li class="nav-item dropdown">
        <!-- id attributes must be unique so we add the item key to the end of it to make it unique-->
        <a class="nav-link dropdown-toggle" role="button"
           href="<?=$trunk->link?>" id="navbarDropdown<?=$trunk->key?>"
           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><?=$trunk->title?></a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <?php foreach ($trunk->children as $branch): ?>
            <?php if (!isset($branch->children)): ?>
              <!-- add style to this if needed -->
              <a href="<?=$branch->link?>"><?=$branch->title?></a>
            <?php else: ?>
              <div class="dropdown-submenu">
                <a class="dropdown-item dropdown-toggle" id="navbarDropdown<?=$branch->key?>"
                   href="<?=$branch->link?>"><?=$branch->title?></a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown<?=$branch->key?>">
                  <!-- You may need to add some additional style code to this for it to work with multiple items -->
                  <?php foreach ($branch->children as $leaf): ?>
                    <a class="dropdown-item" href="<?=$branch->link?>"><?=$branch->title?></a>
                  <?php endforeach; ?>
                </div>
              </div>
            <?php endif ?>
          <?php endforeach; ?>
        </div>
      </li>
    <?php endif ?>
  <?php endforeach ?>
</ul>

根据经验，我尽量避免使用嵌套循环，但在这种情况下，每个级别似乎都有单独的样式。如果您想让它能够处理超过三个级别，您可能需要考虑使用递归函数。

【讨论】：

非常感谢您的回答，也有效！我会再研究一下这个，因为它对我来说比另一个答案更复杂。

以上是关于从多个 mysql 表构建 bootstrap 4 导航菜单的主要内容，如果未能解决你的问题，请参考以下文章

MySQL从具有条件的多个表中选择

在 Flask 中构建带有动态元素的 Bootstrap 表

从数组填充 Bootstrap 4 表？

如何使用 Laravel 查询构建器跨表选择多个列？

如何使用 bootstrap 和 Ajax 根据所选 ID 从 MySQL 数据库中获取数据？

MySQL必知应会-第4章-检索数据