`
idealab
  • 浏览: 197756 次
  • 性别: 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是一种广泛应用于网页和...综上所述,JavaScript实现树形菜单需要理解数据结构、DOM操作、事件处理和性能优化等多个方面的知识。通过不断实践和学习,你可以创建出功能强大且用户体验良好的树形菜单组件。

    JavaScript实现树图层

    JavaScript实现树图层是一种常见的前端开发技术,常用于构建具有层级结构的数据展示,例如网站的导航菜单、组织架构图或者文件目录。在这个场景中,提到的`dtree`是一个JavaScript库,专门用于创建树形图层。从描述...

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

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

    JavaScript实现数据结构

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

    JavaScript实现树状结构展现

    本篇文章将深入探讨如何用JavaScript实现树状结构的展现,并针对用户交互,如单击或双击事件,进行响应处理。 首先,我们需要定义一个树节点的数据结构。一个简单的树节点通常包含以下几个属性:`value`(节点值)...

    JS实现树形结构

    总结来说,JavaScript实现树形结构主要涉及创建树节点类、添加操作节点的方法以及遍历树的算法。通过这些基础知识,我们可以构建出适应各种需求的树形结构组件,为用户界面提供丰富且高效的交互体验。在实际开发中,...

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

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

    基于JavaScript实现的在线数据结构演示系统源码.zip

    基于JavaScript实现的在线数据结构演示系统源码.zip基于JavaScript实现的在线数据结构演示系统源码.zip基于JavaScript实现的在线数据结构演示系统源码.zip基于JavaScript实现的在线数据结构演示系统源码.zip基于...

    小程序 树结构相关内容 自定义 树结构组件

    1. 数据懒加载:对于大型树结构,为了避免一次性加载所有数据导致性能问题,可以实现懒加载,只在节点首次展开时加载其子节点。 2. Virtual DOM:虽然小程序没有提供类似React的Virtual DOM,但可以通过计算节点的...

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

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

    jsp+ajax实现动态树结构

    综上所述,使用JSP和Ajax实现动态树结构涉及到的技术主要包括HTML、CSS、JavaScript、Ajax、JSP、数据库操作和DOM操作等。这不仅要求开发者具备多方面的技能,还需要理解前后端交互的工作原理,以便创建出功能强大、...

    javascript 树

    用javascript写的树形结构用javascript写的树形结构用javascript写的树形结构用javascript写的树形结构用javascript写的树形结构用javascript写的树形结构

    bootstrap树结构简单实现

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

    JavaScript实现简单的树形菜单效果

    本文介绍了如何使用JavaScript实现一个简单的树形菜单效果,通过这个实例,我们可以学习到如何操作DOM、如何通过JavaScript控制样式的变化,以及如何实现一个基本的交互式菜单。 首先,我们需要了解HTML结构。从给...

    js 实现 tree结构

    要使用JavaScript实现树结构,我们可以定义一个`Node`类,包含`value`(节点值)、`children`(子节点数组)等属性,并提供`addChild`、`removeChild`、`findNode`等方法来操作树。 ```javascript class Node { ...

    基于javascript实现的一些数据结构

    本资源“基于javascript实现的一些数据结构”很可能包含了一系列JavaScript实现的经典数据结构,如数组、链表、栈、队列、哈希表、树、图等。下面我们将详细探讨这些数据结构及其在JavaScript中的应用。 1. **数组*...

    基于JavaScript实现的算法和数据结构

    【作品名称】:基于JavaScript实现的算法和数据结构 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】:基于JavaScript...

    原生javascript封住处理树结构数据treejs插件

    接下来,我们将深入探讨这个原生JavaScript实现的树结构插件的核心功能和使用方法。 首先,创建树是TREEJS的基本操作。通过调用相应的API,开发者可以构建出层次分明的树状结构,每个节点可以包含子节点,形成一个...

    基于JavaScript实现树形下拉框

    平时会经常遇到树形结构的问题,比如显示目录结构等。 大多数情况下后台会返回这样的数据,如下: [ { id: 19, pid: 0, name: 'nodejs' }, { id: 20, pid: 19, name: 'express' }, { id: 21, pid: 19, name: '...

    ajax树结构很不错耶

    "TreeWiewDemo"是压缩包中的文件名,通常这是一个演示或者示例程序,用于展示如何实现Ajax树结构。它可能包含HTML、JavaScript、CSS以及可能的服务器端脚本(如PHP、Node.js或ASP.NET),展示了如何使用Ajax技术与...

Global site tag (gtag.js) - Google Analytics