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中的下拉菜单的样式很丑，这里自己稍作了样式的调整)