动态生成菜单

在项目中，因为权限等原因，我们往往需要动态生成菜单，这里我们以php作为示范，提供几种动态生成菜单的方式：

1. 根据用户权限，在页面上输出不同的json
2. 根据用户权限，在页面上限制不同的json
3. 异步请求json

菜单配置信息参看右边菜单配置

菜单配置项

一般的菜单配置如下：

var config = [{   //模块菜单
  id:'menu',      //模块编号
  collapsed:true, //默认左侧菜单收缩
  homePage:'code', //默认打开的主页
  menu:[{         //二级菜单
      text:'首页内容',
      items:[   //三级菜单
        {id:'code',text:'首页代码',href:'main/code.html'},
        {id:'c',text:'标签页',href:'test.html'},
        {id:'d',text:'窗口变化',href:'test.html'},
        {id:'e',text:'首页资源文件',href:'test.html'},
        {id:'g',text:'其他',href:'test.html'}
      ]
    },{
      //二级菜单
      
    },{
      //二级菜单
  }]
},{
  
  //模块菜单
}];
//初始化主页菜单
new PageUtil.MainPage({
  modulesConfig : config
});            
        

php 输出json

可以根据权限在页面上输出不同的json

示例

生成菜单的函数实现在menu_create.php中

<?php 
  include('menu_create.php'); //引入 php 文件
?>
<script>
    BUI.use('common/main',function(){

      var config =<?php  createMenu($user); ?>; // 根据权限生成菜单

      new PageUtil.MainPage({
        modulesConfig : config
      });
    });

</script>

        

限制输出json

针对比较简单的权限设置，可以用过限制输出Json的方式来完成

示例

通过php 的 if、else，限制输出json

<script>
    BUI.use('common/main',function(){

      var config = [{   //模块菜单
        id:'menu',      //模块编号
        collapsed:true, //默认左侧菜单收缩
        homePage:'code', //默认打开的主页
        menu:[{         //二级菜单
            text:'首页内容',
            items:[   //三级菜单
              {id:'code',text:'首页代码',href:'main/code.html'},
              {id:'c',text:'标签页',href:'test.html'}
            <?php if($userLevel == 0){ ?>  ,
              {id:'d',text:'窗口变化',href:'test.html'}
            <?php }?>  ,
              {id:'e',text:'首页资源文件',href:'test.html'},
              {id:'g',text:'其他',href:'test.html'}
            ]
          }
        <?php if($userLevel == 0){ ?>  
          ,{
            //二级菜单
            
          }
        <?php }?>  
          ,{
            //二级菜单
        }]
      },{
        
        //模块菜单
      }];

      new PageUtil.MainPage({
        modulesConfig : config
      });
    });

</script>          
        

注意： 逗号的使用，请勿丢失或者增加逗号，在ie6,7下会报错

使用ajax请求

对于前端来说，使用异步请求更为自然一些

示例

使用ajax请求，直接获取json

BUI.use('common/main',function(){
  //获取json
  $.getJSON('menu.php',function(config){

    new PageUtil.MainPage({
        modulesConfig : config
    });

  });
});          
        

三种方式对比

以上3种方式各有利弊，请慎重考虑

1. 使用php输出json，这是一种很典型的方式，在类似的asp,jsp页面上都适用，但是静态html不支持。
2. 使用php限制菜单的输出，跟方法一 类似，在菜单简单或者权限简单的情形下很合适，复杂情况不要使用。
3. 使用ajax请求的方式，适用面最广，但是有加载问题，菜单需要等异步加载完成后生成。

还有更多的方式，总之，只要能把配置项加载到页面，并初始化生成菜单，就可以了。