项目中需要用到无限级树型下拉菜单,花时间折腾了一下。在此记录下来以备后用!
效果图:
/**
*树形菜单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("加载栏目出错!");
}
});
});
- 大小: 3.4 KB
分享到:
相关推荐
简单的代码,递归方式,简单的样式设计,方便初学菜单设计者应用。
asp递归无限级分类(含完整数据库),网上收集,免费提供。喜欢的记得在下面顶下我。
不用递归实现的无限级树型菜单,加载速度超快。
递归实现的无限级下拉式菜单 没有资源积分了 发布一个资源,换点分:( 可以先看看演示在决定下载与否吧. http://ahlxjg.qsh.eu/MenuTest.aspx
ASP的无限级分类源码,采用递归算法实现,挺不错的。希望对你们也有帮助!
纯ajax 无限级 树形 菜单 源码+.rar纯ajax 无限级 树形 菜单 源码+.rar纯ajax 无限级 树形 菜单 源码+.rar纯ajax 无限级 树形 菜单 源码+.rar
s2sh+freemarker+jquery+jquery-treeview 无限级树形菜单
TreeView用递归实现无限级树.rar
今天小编就为大家分享一篇tp5递归 无限级分类详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
主要介绍了PHP实现递归无限级分类的方法,具有一定的参考价值,需要的朋友可以参考下
Struts+Hibernate+Javascript 实现无限级树形菜单 内含step by step 开发文档 一、说明: 1、开发环境: Eclipse3.2.1+MyEclipse5.1+Tomcat5.5+Microsoft SQL Server 2000 2、主要实现技术:Struts1.2+Hibernate...
当然该方法是支持无限级父子关系。修改之前的源码均来自网上,本人只是对当前做了整合和修改。当前你所有的记录中需要包含id和parentId,也就是有父子关系即可。你的数据源必须是一维的json数组。zNodes=[ {id:1,...
通过递归的方法得到网站后台的管理菜单
C# 递归实现无限级分类,里面的例子可以让你在自己的项目中得以方便的应用.值得初学者学习
php递归实现无限级分类库,感兴趣的朋友们可以下载下来,用到自己的项目中。
递归方式树形菜单实现递归方式树形菜单实现
c#递归遍历xml菜单
php递归实现无限级分类库,感兴趣的朋友们可以下载下来,用到自己的项目中。
jsp struts hibernate JavaScript实现的无限级树形菜单实例,开发环境: Eclipse3.2.1 MyEclipse5.1 Tomcat5.5 Microsoft SQL Server 2000,页面的树形菜单的节点用 JavaScript进行控制 数据库中的商品类别表...