递归无限级树下拉菜单

项目中需要用到无限级树型下拉菜单，花时间折腾了一下。在此记录下来以备后用！

效果图:

	/**
	  *树形菜单VO
	  */
	public class SelectTree implements Serializable{
		private int id;
		private String name;
		private List<SelectTree> child = new ArrayList<SelectTree>();
                //getter & setter ....略
	}

 

代码片段：

	/**
	 * 构建树型菜单数据
	 */
	public List<SelectTree> buildNode(int pid,List<YcChannel> channels){
		List<SelectTree> result = new ArrayList<SelectTree>();
		for(YcChannel chl:channels){
			SelectTree node = new SelectTree();
			if(null != chl.getParentId() && chl.getParentId().equals(pid)){
				node.setId(chl.getChannelId());
				node.setName(chl.getName());
				List<SelectTree> children = buildNode(chl.getChannelId(),channels);
				if(null != children && 0 < children.size()){
					node.setChild(children);
				}
				result.add(node); 
			}
		}
		return result;
	}
	
	public String queryChannelList() {
		ycChannelList = this.channelSer.queryChannelList();
		List<SelectTree> trees = new ArrayList<SelectTree>();
		for(YcChannel yc:ycChannelList){
			if(null == yc.getParentId()){
				SelectTree t = new SelectTree();
				t.setId(yc.getChannelId());
				t.setName(yc.getName());
				t.setChild(buildNode(t.getId(),ycChannelList));
				trees.add(t);
			}
		}
		this.setAjaxData(trees);
		return AJAX_DATA;
	}

 

前端JS代码:

	//recursive tree node
	function buildNode(len,data){
		var prefix = "|";
		for(var i=0;i<len;i++){
			prefix += "-";
		}
		$.each(data,function(i,item){
			if(0 < item.child.length){
				$('#typeid').append("<option value="+item.id +">" + prefix + item.name + "</option>");
				buildNode(len+1,item.child);
			}else{
				$('#typeid').append("<option value="+item.id +">" + prefix + item.name + "</option>");
			}
		});
	}
	
	$.ajax({
		url:'${base}/channel/channelAction!queryChannelList.action',
		type:'GET',
		dataType:'json',
		contentType:'application/json',
		success:function(json){
			if(json.success){
				$('#typeid').empty();
				$('#typeid').append("<option value='0'>请选择栏目...</option>");
				$.each(json.data,function(i,item){
					if(null == item.parentId){
						$('#typeid').append("<option value="+item.id +">" + item.name + "</option>");
						buildNode(1,item.child);
					}
				});
			}
		},
		error:function(){
			alert("加载栏目出错!");
		}
	});
	
});