浏览 1943 次
锁定老帖子 主题:Javascript实现树结构,欢迎拍砖
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2009-05-29
最后修改:2009-05-29
先看下效果: 从数据库获取文章类别的代码如下: <dl class="nav3-grid"> <% CategoryDao dao = (CategoryDao)DaoConfig.getDaoManager().getDao(CategoryDao.class); List<Category> categoryList = dao.getAll(); if(categoryList != null && categoryList.size() != 0){ for(Category category : categoryList){//The first tier if(category.getParentId() == 0){ %><dt><a href="#" onclick="displayChildren(this)"><%=category.getCategoryName() %></a></dt><% List<Category> children = dao.getChildren(category.getCategoryId()); if(children != null && children.size() != 0){ for(Category child : children){//The second tier %><dd style="display:none"><a href="#" onclick="displayChildren(this)"><%=child.getCategoryName() %></a></dd><% List<Category> grandson = dao.getChildren(child.getCategoryId()); if(grandson != null && grandson.size() != 0){ for(Category cate : grandson){//The third tier %><dd class="third" style="display:none"><a href="getPapersByCategory.action?id=<%=cate.getCategoryId() %>"><%=cate.getCategoryName() %></a></dd><% } } } } } } } %> </dl> 控制树展开和收缩动作的JS代码: function displayChildren(category){ var tag = category.parentNode.tagName; if(tag == 'DT'){//when click the first tier var nextNode = category.parentNode.nextSibling; while(nextNode.nodeName == 'DD' && nextNode.className == ''){ if(nextNode.style.display == 'block'){ nextNode.style.display = 'none'; var nextSibl = nextNode.nextSibling; while(nextSibl.className == 'third'){ nextSibl.style.display = 'none'; nextSibl = nextSibl.nextSibling; } } else nextNode.style.display = 'block'; nextNode = nextNode.nextSibling; } }else if(tag == 'DD'){//when click the second tier var nextNodeDD = category.parentNode.nextSibling; while((nextNodeDD.nodeName == 'DD') && (nextNodeDD.className == 'third')){ if(nextNodeDD.style.display == 'block') nextNodeDD.style.display = 'none'; else nextNodeDD.style.display = 'block'; nextNodeDD = nextNodeDD.nextSibling; } } } 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |