在项目中,因为权限等原因,我们往往需要动态生成菜单,这里我们以php作为示范,提供几种动态生成菜单的方式:
菜单配置信息参看右边菜单配置
一般的菜单配置如下:
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 });
可以根据权限在页面上输出不同的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的方式来完成
通过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请求,直接获取json
BUI.use('common/main',function(){ //获取json $.getJSON('menu.php',function(config){ new PageUtil.MainPage({ modulesConfig : config }); }); });
以上3种方式各有利弊,请慎重考虑
还有更多的方式,总之,只要能把配置项加载到页面,并初始化生成菜单,就可以了。