ligerUI---下拉菜单(menubar)动态显示(从后台获取数据)
写在前面：
ligerui的下拉菜单是有点丑的，这也是没有办法的事。。。。。。。。这里主要记录下，如何从后台获取数据进行菜单显示。
有两种方式：1.使用json数组来动态添加 2.字符串拼接。 其实这两中方法原理都差不多，只是实现的形式不同而已。
对于下拉菜单，首先要去看ligerui中api给的demo，看它的数据格式是怎样的，然后再根据对应的数据格式来进行动态实现。
形如这样的数据格式：
{text:"功能管理",url:"www",click:itemclick,menu:{items:[{text:"projectOne",url:"ww",click:itemclick,children:[{ text: 'Excel', click: itemclick }]}]}}
稍作解释：当一级菜单有子菜单时，会有一个menu属性，里面包含一个items,当二级菜单有子菜单时，会有一个children属性，当三级菜单有子菜单，也是会有一个children属性
后面以此类推都是含有children属性。故，我们可以从二级菜单开始这里写一个递归函数来进行调用就可以 这样就可以进行不限层级的调用了
1.json数组动态添加：
前台jsp页面：
var menuData ; $.ajax({ url : '${baseURL}/showFunctionMenu.action?', type : 'POST', async:false, //同步请求 success : function(data){ //将"itemclick" 替换为itemclick 多个替换 var reg=new RegExp("\"itemclick\"","g"); //创建正则RegExp对象 data = data.replace(reg,"itemclick"); //字符串转为json //alert(data); menuData = eval('(' + data +')'); } }); mainMenu = $("#mainMenu").ligerMenuBar({ width: 300, items: menuData, //这里的menuData是上面从后台接收的数据 }); //每个菜单对应的点击函数 function itemclick(item){ //弹出对应的菜单的url地址 alert(item.url); //对于如何做，根据自己的项目来 }
后台：
private JSONArray jsonArray; public JSONArray getJsonArray() { return jsonArray; } public String showFunctionMenu() throws Exception{ //先静态设置Function 可以根据自己程序的需要 这个时候可以在对应的实体类中配置一对多的关系然后从
//数据库中进行相关查询来初始化菜单也可以
jsonArray = new JSONArray(); //初始化Function 静态设值 调用initFuncs方法 我放在了实体类里面 List<FunctionVO> menus = new FunctionVO().initFuncs(); for (FunctionVO item : menus) { JSONObject json = new JSONObject(); json.put("text", item.getName()); json.put("id",item.getId()); json.put("url",item.getUrl()); json.put("click","itemclick"); //如果一级菜单有子菜单 就添加一个menu属性 if (item.getChildren() != null && item.getChildren().size() != 0) { JSONArray jChildFunc = new JSONArray(); for (FunctionVO OneLevelChildFunction : item.getChildren()) { //调用toMenu方法 方法我放在了实体类里面 String strMenu = OneLevelChildFunction.toMenu(OneLevelChildFunction); System.out.println("strOneLeve:" + strMenu); jChildFunc.add(strMenu); } //添加url click方法 json.put("menu", "{width: 160,items:" + jChildFunc.toString() + "}"); } jsonArray.add(json.toString()); } System.out.println(jsonArray.toString()); return SUCCESS; }
实体类：因为是父菜单与子菜单(可以在实体类里面加一个属性children集合，然后配置一对多的关系，就可以进行关联查询了，我这里没有做关联关系的配置，只是静态设值了)
public class FunctionVO22 { private Integer id; private String name; private String url; private String des; private Integer fId; //可以根据具体需要 配置一对多的关联关系 private List<FunctionVO22> children; public FunctionVO22(){} public FunctionVO22(Integer id, String name, String url, String des, Integer fId, List<FunctionVO22> children) { this.id = id; this.name = name; this.url = url; this.des = des; this.fId = fId; this.children = children; } public String toMenu(FunctionVO22 childrenFunctions) throws Exception{ JSONObject json=new JSONObject(); json.put("text",childrenFunctions.getName()); json.put("id",childrenFunctions.getId()); json.put("url",childrenFunctions.getUrl()); json.put("click","itemclick"); JSONArray childrenJson=new JSONArray(); if(childrenFunctions.getChildren()!=null && childrenFunctions.getChildren().size() != 0){ for(FunctionVO22 child:childrenFunctions.getChildren()){ //递归调用toMenu方法 childrenJson.add(toMenu(child)); } json.put("children", childrenJson); } return json.toString(); } /** * Function 初始化 静态设值 * @return */ public List<FunctionVO22> initFuncs() { List<FunctionVO22> menus = new ArrayList<FunctionVO22>(); List<FunctionVO22> baseInfoMenus = new ArrayList<FunctionVO22>(); List<FunctionVO22> componentMenus = new ArrayList<FunctionVO22>(); //设置一级菜单值 静态设置 baseInfoMenus.add(new FunctionVO22(11, "Edit ComponentTpe", "findComponentType","Edit ComponentTpe",1,new ArrayList<FunctionVO22>())); baseInfoMenus.add(new FunctionVO22(12, "Edit Category List", "findCategory","Edit Category List",1,new ArrayList<FunctionVO22>())); baseInfoMenus.add(new FunctionVO22(13, "Edit Vendor List", "findVendor","Edit Vendor List",1,new ArrayList<FunctionVO22>())); baseInfoMenus.add(new FunctionVO22(14, "Edit Customer List", "findCustomer","Edit Customer List",1,new ArrayList<FunctionVO22>())); baseInfoMenus.add(new FunctionVO22(15, "Edit Device List", "findDevice","Edit Device List",1,new ArrayList<FunctionVO22>())); baseInfoMenus.add(new FunctionVO22(16, "Edit Language List", "findLanguage","Edit Language List",1,new ArrayList<FunctionVO22>())); baseInfoMenus.add(new FunctionVO22(17, "Edit Os List", "findOs","Edit Os List",1,new ArrayList<FunctionVO22>())); baseInfoMenus.add(new FunctionVO22(18, "Edit Arch List", "findArch","Edit Arch List",1,new ArrayList<FunctionVO22>())); componentMenus.add(new FunctionVO22(21, "Edit Component", "manageComponent_edit","Edit Component",2,null)); componentMenus.add(new FunctionVO22(22, "Component List", "manageComponent_list","Component List",2,null)); menus.add(new FunctionVO22(1, "BaseInfo Management",null,"BaseInfo Management",0,baseInfoMenus)); menus.add(new FunctionVO22(2, "Component Management",null,"Component Management",0,componentMenus)); menus.add(new FunctionVO22(3, "Project Management",null,"Project Management",0,new ArrayList<FunctionVO22>())); return menus; } //省略对应的get set方法 //...... }
其实也没什么多说的，只要获得的数据格式是符合ligerui中菜单中的格式，即可了。
2.字符串拼接(这里我只做到了二级，并没有做无限层级的添加，其实这个也是可以的，只要找到格式的规律，写一个满足条件的递归函数来调用就可以了):
前台页面：
var menuData ; $.ajax({ url : '${baseURL}/showFunctionMenu2.action?', type : 'POST', async:false, //同步请求 success : function(data){ //alert(data); //字符串转为json menuData = eval('(' + data +')'); } }); mainMenu = $("#mainMenu").ligerMenuBar({ width: 300, items: menuData, }); function itemclick(item){ alert(item.url); }
后台action：
public void showFunctionMenu() throws Exception{ //现在固定为二级菜单 //采用拼接的方式 将ligerMenuBar需要的数据发送到前台 StringBuilder json = new StringBuilder(); json.append("["); //获取所有的一级Function List<Function> functionList = functionService.getAllOneLevel(); //生成一级Function //遍历拼接所有的一级Function for(int i=0;i<functionList.size();i++ ){ json.append("{text:\""); json.append(functionList.get(i).getFunctionDes()); json.append("\",url:\""); json.append(functionList.get(i).getFunctionUrl()); json.append("\",click:itemclick,"); //json.append("{text:\"功能管理\",url:\"www\",click:itemclick}"); //获取一级Function对应的二级Function List<Function> childrenList = functionService.getAllTwoLevel(functionList.get(i).getFunctionId()); //有二级Function if(childrenList.size()>0){ // json.append("menu:{items:[{text:\"projectOne\",url:\"ww\",click:\"ee\",}],},"); json.append("menu:{items:["); for(int i2=0;i2<childrenList.size();i2++){ //{ text: 'Project Management', url:"",click:"",menu:{items:[{text:'projectOne',url:"",click:"",},{text:'project2'},]}],},}, json.append("{text:\""); json.append(childrenList.get(i2).getFunctionDes()); json.append("\",url:\""); json.append(childrenList.get(i2).getFunctionUrl()); json.append("\",click:itemclick,},"); } json.append("],},"); } json.append("},"); } json.append("]"); //因为是拼接的字符串 这里可以直接使用流来将传递字符串 而不用json格式的数据去传递 httpServletResponse.setContentType("text/html;charset=utf-8"); PrintWriter printWriter=httpServletResponse.getWriter(); printWriter.write(json.toString()); System.out.println(json.toString()); }
好啦，我要困死了，就这样吧 就当笔记记录下吧。。。。。。。。
成功截图：(api中的下拉菜单的样式很丑，这里自己稍作了样式的调整)
