zoukankan      html  css  js  c++  java
  • 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({
                     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", "{ 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({
                     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中的下拉菜单的样式很丑,这里自己稍作了样式的调整)

      

  • 相关阅读:
    jquery toggle(listenerOdd, listenerEven)
    struts quick start
    hdu 1518 Square (dfs)
    hdu 2544 最短路 (最短路径)
    hdu 1754 I Hate It (线段树)
    hdu 1856 More is better (并查集)
    hdu 1358 Period (KMP)
    hdu 2616 Kill the monster (DFS)
    hdu 2579 Dating with girls(2) (bfs)
    zoj 2110 Tempter of the Bone (dfs)
  • 原文地址:https://www.cnblogs.com/eleven258/p/7902972.html
Copyright © 2011-2022 走看看