动态生成菜单

在项目中,因为权限等原因,我们往往需要动态生成菜单,这里我们以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 的 ifelse,限制输出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请求的方式,适用面最广,但是有加载问题,菜单需要等异步加载完成后生成。

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