首页 > 代码库 > knpMenuBundle制作面包屑导航 左侧导航 碉堡了

knpMenuBundle制作面包屑导航 左侧导航 碉堡了

2024-08-20 17:55:59   224人阅读

最近做一个小项目，用的symfony3玩的。

之前一直深受别的框架影响。习惯把链接管理写在数据库里，这样方面操作。
 
但是今天按照以前的思路做下来别的都还正常但是做面包屑导航的时候就遇到问题了。于是找了一个knpmenubundle来重做了栏目  发现这样做真的好快。比以前做的快多了
首先按照symfony官网中使用教程来操作。
简单的东西直接按官网走就解决了。
https://github.com/KnpLabs/KnpMenuBundle/blob/master/Resources/doc/index.rst
执行完以后可以进行操作了。
在你的bundle新建文件，为了快，我直接贴出目录机构
技术分享

 创建这个文件然后执行操作
我是执行的树形栏目并且打算以后加上角色访问。所以在这里做的有点繁琐。
在adminBuilder.php代码为：
  1. <?php
  2. /**
  3. * Created by PhpStorm.
  4. * User: 27981
  5. * Date: 2016/11/13
  6. * Time: 20:33
  7. */
  9. namespace Lot\AclBundle\Menu;
  10. use Knp\Menu\Util\MenuManipulator;
  11. use Doctrine\Common\Util\Debug;
  12. use Knp\Menu\FactoryInterface;
  13. use Symfony\Component\DependencyInjection\ContainerAwareInterface;
  14. use Symfony\Component\DependencyInjection\ContainerAwareTrait;
  16. class AdminBuilder implements ContainerAwareInterface
  17. {
  18. use ContainerAwareTrait;
  20. public function mainMenu(FactoryInterface $factory, array $options)
  21. {
  22. // 获取doctrine服务方便进行数据库操作
  23. $em = $this->container->get(‘doctrine‘)->getManager();
  25. // 开始创建菜单
  26. $menu = $factory->createItem(‘root‘,array(‘label‘=>‘主页‘));
  28. // 从数据库读出所有的链接
  29. $linklist = $em->getRepository(‘LotAclBundle:Linkadmin‘)->getLinkList(true,true);
  31. // 遍历列出一级栏目
  32. foreach ($linklist as $lk=>$lv)
  33. {
  34. // 添加一级栏目
  35. $menu->addChild($lv[‘id‘],array(‘label‘=>$lv[‘routeLabel‘],‘attributes‘=> array(
  36. ‘icons‘ => $lv[‘iconName‘]
  37. )));
  38. // 遍历列出二级栏目
  39. if(isset($lv[‘sLinkList‘]) && !empty($lv[‘sLinkList‘]))
  40. {
  41. foreach ($lv[‘sLinkList‘] as $sk=>$sv)
  42. {
  43. // 执行添加二级栏目
  44. $menu[$lv[‘id‘]]->addChild($sv[‘id‘], array(
  45. ‘route‘ => $sv[‘routeName‘],
  46. ‘label‘ => $sv[‘routeLabel‘],
  47. ‘attributes‘ => array(‘describe‘ => $sv[‘describe‘]),
  48. ));
  50. $treeLink = $em->getRepository(‘LotAclBundle:Linkadmin‘)->findOneBy(array(
  51. ‘linkPid‘ => $sv[‘id‘],
  52. ‘isShow‘ => 0,
  53. ‘isDelete‘ => 0,
  54. )
  55. );
  56. if(!empty($treeLink))
  57. {
  58. // 三级
  59. $menu[$lv[‘id‘]][$sv[‘id‘]]->addChild($treeLink->getId(),
  60. array(
  61. ‘route‘ => $treeLink->getRouteName(),
  62. ‘label‘ => $treeLink->getRouteLabel(),
  63. ‘attributes‘ => array(‘describe‘ => $treeLink->getDescribe()),
  64. ));
  65. }
  66. }
  67. }
  69. }
  70. return $menu;
  71. }
  73. }
然后再leftmenu.html.twig中（这个为左侧菜单）
  1. {% set menuItem = knp_menu_get(‘LotAclBundle:AdminBuilder:mainMenu‘) %}
  2. <!------菜单------->
  3. <div id="sidebar" class="sidebar">
  4. <div class="sidebar-menu nav-collapse">
  5. <div class="divide-20"></div>
  6. <!-- SEARCH BAR -->
  7. <div id="search-bar">
  8. <input class="search" type="text" placeholder="Search"><i class="fa fa-search search-icon"></i>
  9. </div>
  10. <!-- /SEARCH BAR -->
  11. <!-- 左侧菜单开始 -->
  12. <ul>
  13. {% if menuItem.children is defined and menuItem.children is not empty %}
  14. {% for lkey in menuItem.children %}
  15. <li class="has-sub">
  16. <a href="javascript:;" class="">
  17. <i class="fa {{ lkey.attributes.icons }}"></i> <span class="menu-text">{{ lkey.label }}</span>
  18. <span class="arrow"></span>
  19. </a>
  20. {% if lkey.children is defined and lkey.children is not empty %}
  21. <ul class="sub">
  22. {% for skey in lkey.children %}
  23. <li><a class="" href="{{ skey.uri is defined ? skey.uri: ‘#‘ }}"><span class="sub-menu-text">{{ skey.label is defined ? skey.label : ‘‘ }}</span></a></li>
  24. {% endfor %}
  25. </ul>
  26. {% endif %}
  27. </li>
  28. {% endfor %}
  29. {% endif %}
  30. </ul>
  31. <!-- /左侧菜单结束 -->
  32. </div>
  33. </div>
  34. <!-- SIDEBAR -->
  37. <!------菜单------->
  38. {#<div id="sidebar" class="sidebar">#}
  39. {#<div class="sidebar-menu nav-collapse">#}
  40. {#<div class="divide-20"></div>#}
  41. {#<!-- SEARCH BAR -->#}
  42. {#<div id="search-bar">#}
  43. {#<input class="search" type="text" placeholder="Search"><i class="fa fa-search search-icon"></i>#}
  44. {#</div>#}
  45. {#<!-- /SEARCH BAR -->#}
  46. {#<!-- 左侧菜单开始 -->#}
  47. {#<ul>#}
  48. {#{% if linklist is defined and linklist is not empty %}#}
  49. {#{% for list in linklist %}#}
  50. {#<li class="has-sub">#}
  51. {#<a href="javascript:;" class="">#}
  52. {#<i class="fa {{ list.iconName is defined ? list.iconName : ‘‘ }}"></i> <span class="menu-text">{{ list.routeLabel is defined ? list.routeLabel : "" }}</span>#}
  53. {#<span class="arrow"></span>#}
  54. {#</a>#}
  55. {#{% if list.sLinkList is defined and list.sLinkList is not empty %}#}
  56. {#<ul class="sub">#}
  57. {#{% for slist in list.sLinkList %}#}
  58. {#<li><a class="" href="{{ slist.routeName is defined ? path(slist.routeName): ‘#‘ }}"><span class="sub-menu-text">{{ slist.routeLabel is defined ? slist.routeLabel : ‘‘ }}</span></a></li>#}
  59. {#{% endfor %}#}
  60. {#</ul>#}
  61. {#{% endif %}#}
  62. {#</li>#}
  63. {#{% endfor %}#}
  64. {#{% endif %}#}
  65. {#</ul>#}
  66. {#<!-- /左侧菜单结束 -->#}
  67. {#</div>#}
  68. {#</div>#}
  69. <!-- /SIDEBAR -->
效果如下图：
技术分享
 可以打印出来数据结构。看到数据结构就知道怎么遍历了。之前第一次用的时候对symfony不太了解。所以很多地方搞不定。于是放弃了使用这个包。如今回过头来感觉这些包是真方便
数据结构如图
技术分享
 
上面是两种读取方式。一种是用menubundle 一直是按传统做法来做。
按照symfony的路由命名  如果后面有参数的话，应该这样做
  1. $parent = $menu->addChild(‘Users‘, array(‘route‘ => ‘users‘));
  2. $parent->addChild(‘Edit‘, array(‘route‘ => ‘user_edit‘, ‘routeParameters‘ => array(‘id‘ => $request->get(‘id‘))));
为了便于操作我习惯把这些参数写进数据库
 
左侧导航是搞定了。然后头疼的就来了。面包屑导航。找了半天在StackOverflow里找了一个特别厉害的大哥  说的特别仔细
链接在这里
http://stackoverflow.com/questions/13359366/creating-breadcrumbs-in-symfony-2-1-using-knpmenu-bundle
 
在这里有几个要点
 
获取栏目总数据
knp_menu_get()
{% set menuItem = knp_menu_get(‘LotAclBundle:AdminBuilder:mainMenu‘) %}
获取当前的栏目数据
knp_menu_get_current_item()
{% set currentInfo = knp_menu_get_current_item(menuItem) %}
 
获取面包屑数据
knp_menu_get_breadcrumbs_array()
  1. <!-- 面包屑开始 -->
  2. <ul class="breadcrumb">
  3. {% for breadcrumb_item in knp_menu_get_breadcrumbs_array(knp_menu_get_current_item(menuItem)) %}
  4. {% if not loop.last %}
  5. <li><a href="{{ breadcrumb_item.uri }}">{{ breadcrumb_item.label }}</a></li>
  6. {% else %}
  7. <li class="active">{{ breadcrumb_item.label }}</li>
  8. {% endif %}
  9. {% endfor %}
  10. </ul>
  11. <!-- /面包屑结束 -->
效果图如下 是不是特别叼。我感觉真他妈叼爆了
技术分享
 从此以后做面包屑导航是如此的简单哈啊哈哈哈哈哈哈哈哈哈哈

 

knpMenuBundle制作面包屑导航 左侧导航 碉堡了


联系
我们