【问题标题】:Create a Dynamic Nav on the Fly动态创建动态导航
【发布时间】:2011-11-22 20:55:04
【问题描述】:

我正在寻找动态创建复杂导航元素的最佳方式。我拥有数据库中的所有元素(标题、id、parentId),我想有效地将​​它们从数据库中取出并正确显示。我还想折叠所有不活动的导航元素。因此,如果我浏览“沙发”,我不会看到“吊灯”或照明下的任何类别,但会看到“照明”。

这就是我希望最终产品的样子:

  • 家具
    • 客厅
      • 沙发
      • 椅子
      • 奥斯曼人
    • 卧室
      • 床头柜
  • 照明
    • 吊灯
    • 落地灯
    • 壁灯
  • 地毯和纺织品
    • 当代
    • 复古

我目前的方法是

  1. 编写一个 SQL 查询来拉取所有类别名称、ID 和父 ID
  2. 遍历类别并将子类别存储在其父类别下的排序多维数组中。
  3. 遍历新数组并添加另一个条目以将相应的类别标记为打开(所有类别默认关闭)
  4. 遍历数组并编写 HTML

我正在尝试通过尽可能少的交互来实现这一点,并且我确信我现在拥有的代码效率低下。特别是第 2 步,我多次遍历数组。这个(常见的?)问题必须有一个通用的解决方案。

【问题讨论】:

  • 在创建多维数组时,为什么不在第二次迭代中将相应的类别标记为打开?
  • 您使用的是 JavaScript 还是其他一些客户端逻辑?如果没有,那么您看不到的东西将无法打开,并且没有理由获取/处理该信息......

标签: php mysql navigation


【解决方案1】:

考虑在您的数据库表中添加一个新字段:level
主类别将有 level 0。
子类别将有level 1.
子子类别将有level 2.
等等

这个技巧将帮助您知道在没有第二次数组迭代的情况下要禁用哪些子类别。

【讨论】:

    【解决方案2】:

    我相信这是使用递归生成 html 代码的理想场所。 我前一阵子用过这个功能。它正在使用多维数组(树)

    function buildMenu($menu_array, $is_sub=FALSE) {
          $attr = (!$is_sub) ? 'id="menu"' : 'class="submenu"';
          $menu = "<ul $attr>\n"; 
          foreach($menu_array as $id => $elements) {
              foreach($elements as $key => $val) {
                  if(is_array($val)) {
                      $sub = buildMenu($val, TRUE);
                  }
                  else {
                      $sub = NULL;
                      $$key = $val;
                  }
              }
              if(!isset($url)) {
                  $url = $id;
              }
              $menu .= "<li><a href=\"$url\">$display</a>$sub</li>\n";
              unset($url, $display, $sub);
          }
          return $menu . "</ul>\n";
      }
      echo buildMenu($menu_array);  
    

    这也添加了 css 属性。如果您想标记当前活动页面,您可以使用strpos() 函数来查找您当前的网址。如果您需要更多功能,可以轻松将它们添加到buildMenu()

    使用上面答案中提到的级别也会有所帮助。如果您在数据库中使用嵌套集模型,我还可以帮助您完成我的查询,这是一个返回整个菜单数据的单选。

    【讨论】:

      猜你喜欢
      • 2016-11-15
      • 1970-01-01
      • 1970-01-01
      • 2016-02-08
      • 2012-01-13
      • 2021-06-06
      • 1970-01-01
      • 1970-01-01
      • 2013-01-22
      相关资源
      最近更新 更多