easyUI和SpringMVC JPA 共同实现树形菜单

树控件在web页面中一个将分层数据以树形结构进行显示。根据 easyUI API可以得知，树控件的每个节点都具备以下属性

id：节点ID，对加载远程数据很重要。

text：显示节点文本。

state：节点状态，'open'或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。

checked：表示该节点是否被选中。

attributes: 被添加到节点的自定义属性。

children: 一个节点数组声明了若干节点。

同时，树控件的数据结构是下面的形式

[javascript]view plaincopy

[{

"id":1,

"text":"Folder1",

"iconCls":"icon-save",

"children":[{

"text":"File1",

"checked":true

},{

"text":"Books",

"state":"open",

"attributes":{

"url":"/demo/book/abc",

"price":100

},

"children":[{

"text":"PhotoShop",

"checked":true

},{

"id":8,

"text":"SubBookds",

"state":"closed"

}]

}]

},{

"text":"Languages",

"state":"closed",

"children":[{

"text":"Java"

},{

"text":"C#"

}]

}]

从上面的代码可以看出，树控件的数据是json类型的，属性children也是json类型的。

下面就以springMVC JPA为基础，实现树形控件。

一、数据设计

二、前台JSP，很简单，就一div就可以。

[html]view plaincopy

三、JQ实现easyUI

[javascript]view plaincopy

$(function(){

$("#t1").tree({

url:$('#ctx').val()+'/menu/getMenu.do'

});

});

四、后台代码实现

数据库查询

[java]view plaincopy

/**

*根据父节点的值查询所有的子节点

*@paramparentId

*@return

*/

publicListgetMenuByParentId(StringparentId){

returnmenuDaoJpa.findByParentId(parentId);

}

controller层逻辑编辑

[java]view plaincopy

/**

*获取菜单

*

*@paramrequest

*@paramresponse

*/

@RequestMapping("/getMenu.do")

@ResponseBody

publicListgetMenu(HttpServletRequestrequest,HttpServletResponseresponse){

//获取父节点id

ListmenuLst=menuService.getMenuByParentId("0");

ListmenuList=newArrayList();

//父节点

MenuVomenuVo=newMenuVo();

//子节点

MenuVochild;

Listchildren=newArrayList();

for(MenuPomenuPo:menuLst){

menuVo=newMenuVo();

//父节点ID

Stringid=menuPo.getParentId();

//当前节点ID

StringmenuId=menuPo.getMenuId();

child=newMenuVo();

//一级菜单

if("0".equals(id)){

//节点ID

menuVo.setId(String.valueOf(menuPo.getId()));

//节点text

menuVo.setText(menuPo.getName());

children=newArrayList();

ListchildLst=menuService.getMenuByParentId(menuId);

for(MenuPomenuChild:childLst){

//节点ID

child.setId(menuChild.getMenuId());

//节点text

child.setText(menuChild.getName());

children.add(child);

menuVo.setChildren(children);

}

}

menuList.add(menuVo);

}

returnmenuList;

}

运行结果