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中的下拉菜單的樣式很丑，這里自己稍作了樣式的調整)