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