树控件在web页面中一个将分层数据以树形结构进行显示。根据 easyUI API可以得知,树控件的每个节点都具备以下属性
-
id:节点ID,对加载远程数据很重要。
-
text:显示节点文本。
-
state:节点状态,'open' 或 'closed',默认:'open'。如果为'closed'的时候,将不自动展开该节点。
-
checked:表示该节点是否被选中。
-
attributes: 被添加到节点的自定义属性。
-
children: 一个节点数组声明了若干节点。
[{
"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":"Sub Bookds",
"state":"closed"
}]
}]
},{
"text":"Languages",
"state":"closed",
"children":[{
"text":"Java"
},{
"text":"C#"
}]
}]
从上面的代码可以看出,树控件的数据是json类型的,属性children也是json类型的。
下面就以springMVC JPA为基础,实现树形控件。
一、数据设计
二、前台JSP,很简单,就一div就可以。
<div id="t1"></div>
三、JQ实现easyUI
$(function(){
$("#t1").tree({
url:$('#ctx').val()+'/menu/getMenu.do'
});
});
四、后台代码实现
数据库查询
/**
* 根据父节点的值查询所有的子节点
* @param parentId
* @return
*/
public List<MenuPo> getMenuByParentId(String parentId) {
return menuDaoJpa.findByParentId(parentId);
}
controller层逻辑编辑
/**
* 获取菜单
*
* @param request
* @param response
*/
@RequestMapping("/getMenu.do")
@ResponseBody
public List<MenuVo> getMenu(HttpServletRequest request, HttpServletResponse response) {
// 获取父节点id
List<MenuPo> menuLst = menuService.getMenuByParentId("0");
List<MenuVo> menuList = new ArrayList<MenuVo>();
// 父节点
MenuVo menuVo = new MenuVo();
// 子节点
MenuVo child;
List<MenuVo> children = new ArrayList<MenuVo>();
for(MenuPo menuPo : menuLst){
menuVo = new MenuVo();
// 父节点ID
String id = menuPo.getParentId();
// 当前节点ID
String menuId = menuPo.getMenuId();
child = new MenuVo();
// 一级菜单
if ("0".equals(id)) {
// 节点ID
menuVo.setId(String.valueOf(menuPo.getId()));
//节点text
menuVo.setText(menuPo.getName());
children = new ArrayList<MenuVo>();
List<MenuPo> childLst = menuService.getMenuByParentId(menuId);
for(MenuPo menuChild : childLst){
// 节点ID
child.setId(menuChild.getMenuId());
//节点text
child.setText(menuChild.getName());
children.add(child);
menuVo.setChildren(children);
}
}
menuList.add(menuVo);
}
return menuList;
}
运行结果