easyUI tree 的实现

利用easyUI tree 实现 树形结构菜单

1  easyUI tree 的相关介绍  （API）

    http://blog.163.com/wwwsdh870680601@126/blog/static/78647206201231234633943/

2  easyUI tree json 数据类型后台拼接

    树形结构对象

public class AjaxTreeVO {  /*  id: node id, which is important to load remote data    text: node text to show    state: node state, 'open' or 'closed', default is 'open'. When set to 'closed', the node have children nodes and will load them from remote site    checked: Indicate whether the node is checked selected.    attributes: custom attributes can be added to a node    children: an array nodes defines some children nodes*/private String id;private String text;private String iconCls;private String url;public String getUrl() {return url;}public void setUrl(String url) {this.url = url;}private String state = "open";  private Boolean checked;private Map<String,String> attributes = new HashMap<String,String>();private List<AjaxTreeVO> children = new ArrayList<AjaxTreeVO>();public String getId() {return id;}public void setId(String id) {this.id = id;}public String getText() {return text;}public void setText(String text) {this.text = text;}public String getState() {return state;}public void setState(String state) {this.state = state;}public Boolean getChecked() {return checked;}public void setChecked(Boolean checked) {this.checked = checked;}public Map<String, String> getAttributes() {if ( ! StringUtils.isEmpty(url)){if (attributes == null){attributes = new HashMap<String,String>();}attributes.put("url", url);}return attributes;}public void setAttributes(Map<String, String> attributes) {this.attributes = attributes;}public List<AjaxTreeVO> getChildren() {return children;}public void setChildren(List<AjaxTreeVO> children) {this.children = children;}public String getIconCls() {return iconCls;}public void setIconCls(String iconCls) {this.iconCls = iconCls;}}

树形对象与实体类之间的转换

public class TransUtils {public static AjaxTreeVO menu2AjaxTreeVo(TMenuInfPO menu){AjaxTreeVO mainitem = new AjaxTreeVO();mainitem.setId(String.valueOf(menu.getId()));mainitem.setText(menu.getMenuNm());mainitem.setUrl(menu.getMenuUrl());mainitem.setIconCls(menu.getMenuIcon());return mainitem;}}

后台拼接数据

@ResponseBody@RequestMapping(value = "/allMenuTree.action")public List<AjaxTreeVO> allMenuTree(HttpServletRequest request) {List<AjaxTreeVO> rootList = new ArrayList<AjaxTreeVO>();Map<String,AjaxTreeVO> ajaxTreeMap = new HashMap<String,AjaxTreeVO>();TMenuInfPO po =new TMenuInfPO();po.setMenuSt("01"); // 状态为正常的集合List<TMenuInfPO> menuList =menuService.queryList(po);for(TMenuInfPO menu:menuList){String pmenuId = String.valueOf(menu.getPMenuId());String menuId =String.valueOf(menu.getId());if ("0".equals(pmenuId)){//根节点// 根节点时，将根节点这个java 对象 转换成tree对象 ，并将根对象放入到List 集合中AjaxTreeVO item =  TransUtils.menu2AjaxTreeVo(menu);rootList.add(item);ajaxTreeMap.put(menuId, item);  // key为菜单id value为这个根节点的tree对象}else{// 将存在父节点的对象 添加到父节点的Children()中if (ajaxTreeMap.containsKey(pmenuId)){AjaxTreeVO parentItem = ajaxTreeMap.get(pmenuId);AjaxTreeVO item =  TransUtils.menu2AjaxTreeVo(menu);parentItem.getChildren().add(item);ajaxTreeMap.put(menuId, item);}}}log.info(rootList.toString());return rootList;}

前台jsp中实现树形结构

<ul id="tt1"></ul>

JavaScript  

var url='${base}/menu/allMenuTree.action';$(function(){$('#tt1').tree({url:url,checkbox:true, // 定义是否在每个节点前边显示 checkbox animate:true,  //定义当节点展开折叠时是否显示动画效果/* onContextMenu:function(e,node){e.preventDefault();$(this).tree('select',node.target);$('#mm').menu('show',{left:e.pageX,top:e.pageY})}, */onCheck:function(node,checked){var nodes = $('#tt1').tree('getChecked');var selectedIdArray = new Array();for (var i = 0; i < nodes.length; i++) {// var parentids = nodes[i].attributes.parentid; var id =nodes[i].id; selectedIdArray.push(id)}$('#selectedMenus').val(selectedIdArray.join(','));alert($('#selectedMenus').val())}});});