`
idealab
  • 浏览: 198512 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Javascript实现树结构,欢迎拍砖

    博客分类:
  • Ajax
阅读更多
近日写一个文章检索系统,需要用到一个树来动态显示数据库中存储的文章类别,于是自己操刀用JS编写。虽然实现了预期功能,但代码结构和实现逻辑(或说设计思路)并不是很理想,希望各位能够给些建议,谢谢!

先看下效果:


从数据库获取文章类别的代码如下:
<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;
			}
		}
 	}
  • 大小: 9.7 KB
分享到:
评论

相关推荐

    JavaScript树\利用JavaScript实现树型结构的TreeView类

    ### JavaScript树:利用JavaScript实现树型结构的TreeView类 在现代Web开发中,树形结构是一种常见的数据组织方式,尤其适用于表示具有层级关系的数据集合,如文件系统、组织架构图等。利用JavaScript来构建这样的...

    javascript 实现的导航树

    总的来说,使用JavaScript实现导航树需要理解DOM操作、事件处理、CSS样式和数据结构等基础知识,同时还要考虑性能和兼容性问题。通过这种方式,我们可以为用户提供交互性强、易于导航的界面,提高网站的用户体验。

    javascript树形结构控件

    下面将详细讨论JavaScript实现树形结构控件的关键技术和相关知识点。 1. **DOM操作**: - 树形结构控件的构建离不开DOM(文档对象模型)操作。JavaScript需要动态地创建、修改和删除DOM元素,以反映树结构的增删改...

    JavaScript实现数据结构

    本主题主要围绕JavaScript实现常见数据结构进行详细探讨。 首先,我们来了解一些基本的数据结构类型: 1. 数组(Array):JavaScript中的数组是最常用的数据结构之一,它可以存储多个元素,并通过索引来访问。数组...

    javascript实现刷新不变化树形菜单

    当用户在浏览过程中操作了树形菜单,比如展开或关闭某个节点,为了在刷新页面后仍能保持用户的操作状态,可以利用JavaScript配合cookies来实现这一功能。 首先,我们需要理解cookies的工作原理。Cookies是服务器在...

    树结构 复选框 多选 全选功能

    通过学习和理解这些代码,开发者可以掌握如何在实际项目中实现树结构的复选框多选全选功能。 总之,理解和实现"树结构 复选框 多选 全选功能"是提升前端开发技能的重要一环。它要求开发者具备数据结构知识、事件...

    javascript实现动态树例子

    总的来说,使用JavaScript实现动态树涉及的主要知识点包括:对象和类的使用、树数据结构的理解、DOM操作、事件处理和可能的异步编程。通过实践这样的例子,开发者可以加深对JavaScript特性和数据可视化原理的理解,...

    javascript实现树形选项菜单

    JavaScript实现的树形选项菜单是一种常见的用户界面元素,尤其在数据层级结构复杂的应用场景中,如文件管理系统、组织架构展示或导航菜单等。通过JavaScript,我们可以动态地创建、展开和折叠菜单项,提供用户友好的...

    javascript-Trees树结构.rar

    javascript-Trees树结构.rar

    js实现树形结构,功能非常强大,而调用又非常简单

    本知识点将深入探讨如何使用JavaScript实现树形结构,并提供相关资源。 树形结构是一种数据结构,它表示了对象之间的层次关系。每个节点(或元素)可以有零个或多个子节点,而根节点没有父节点。JavaScript中的树形...

    树形结构生成javaScript

    本主题主要关注如何在JavaScript中生成和操作树形结构。以下是一些关键知识点: 1. **定义节点对象**:在JavaScript中,树的每个元素通常表示为一个对象,包含数据以及指向子节点的引用。例如: ```javascript ...

    使用jsTree实现js树形结构

    jsTree 是一个强大且灵活的前端库,可以帮助你快速实现交互式的树形结构。通过深入学习其配置选项、事件、插件和 API,你可以创建出满足各种需求的树形视图。无论你是新手还是经验丰富的开发者,jsTree 都能提供简洁...

    树形菜单(javascript实现)

    树形菜单(javascript实现)树形菜单(javascript实现)树形菜单(javascript实现)树形菜单(javascript实现)树形菜单(javascript实现)树形菜单(javascript实现)树形菜单(javascript实现)树形菜单...

    java构造多级树结构,支持多根节点

    这里我们讨论如何在Java中实现一个支持多根节点的树结构,并使用ZTree(一种流行的JavaScript库)进行展示。首先,我们需要理解树的基本概念。 **树结构基础** 树是一种非线性数据结构,由节点和边组成。每个节点...

    树形结构javascript代码

    在本主题中,我们将深入探讨如何使用JavaScript实现树形结构,特别是与"dtree"相关的实现。 首先,树形结构的基本元素是节点(Node),每个节点可以包含一个值和若干子节点。在JavaScript中,我们可以创建一个Node...

    JS+jquery实现动态树结构

    本篇文章将深入探讨如何使用JS和jQuery来实现动态树结构,并基于提供的文件`jzaefferer-jquery-treeview-3937863`进行讲解。 首先,我们需要了解jQuery Treeview插件,这是一个由Jörn Zaefferer开发的jQuery扩展,...

    JS实现树形结构.rar

    在JavaScript中,实现树形结构是一项常见的任务,特别是在前端开发中,例如构建文件系统、组织菜单、展现数据层级等。树形结构是一种数据结构,它由节点(或称为元素)组成,每个节点可以有零个或多个子节点,形成一...

    javascript实现多级静态树例子

    在JavaScript编程中,构建多级静态树是一种常见的需求,它...总的来说,JavaScript实现多级静态树主要涉及数据结构的设计、递归操作以及遍历算法。通过理解这些核心概念,开发者可以有效地处理各种需要树形结构的场景。

    bootstrap树结构简单实现

    总结,构建Bootstrap的树结构主要涉及HTML结构设计、CSS样式设置和JavaScript交互实现。在实际项目中,可以结合Java后端服务,利用API接口进行数据交换。通过学习和理解这些技术,我们可以创建出既美观又实用的树状...

    算法+JavaScript实现树形结构转换+前端面试题

    JavaScript通过对数据进行数据转换实现二叉树。数据结构如下:let data = [ { id: 1, name: "目录1", parentId: 0, }, { id: 2, name: "目录1-1", parentId: 1, }]

Global site tag (gtag.js) - Google Analytics