递归无限级树上拉菜单

递归无限级树下拉菜单

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

效果图:

/**  *树形菜单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 nodefunction 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("加载栏目出错!");}});});