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())
			}
		});
	});