Ajax特效 动态树形列表 之一

最新推荐文章于 2021-08-05 18:12:15 发布
原创 最新推荐文章于 2021-08-05 18:12:15 发布 · 1.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ajax #menu #div #function #class #html

本文介绍了如何使用Ajax技术创建动态树形列表，该方法结合一次性加载和逐步加载的优点，提供无刷新和动态加载的用户体验。文章通过一个简单的示例展示了动态树形列表的基本原理，包括节点的动态追加、样式缩进以及事件处理，特别是如何防止事件冒泡导致的额外子项创建。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

树形列表（菜单）在Web应用中十分常见，通常应用于目录式结构，例如产品分类、部门机构等。传统的树形菜单主要有两种加载方式：一种是一次性加载全部数据，另一种是根据用户操作逐步加载数据，但是需要刷新页面。前者加载速度较慢，并且存在大量数据没有被使用的浪费情形。后者可以逐步加载，但是频繁地刷新页面在给用户带来不便的同时，也增加了系统开发的复杂度。

当前使用的Ajax技术，同时兼顾了两种传统方式的优点，即无刷新和动态加载特性。从用户体验到服务器负担来讲都是有利的。

 

由于编写一个动态树形列表要考虑的问题很多，在进入正式的讲解之前，先以一个简单的页面展示一下树形列表的基本原理。了解了基本原理后，再深入研究树形列表的细节就容易多了。图1.6所示是基本原理演示页面的运行效果。

动态树形列表的基本原理是：每当单击一个子项时，动态地在子项节点内追加新的节点，同时依靠样式表设置新节点的缩进。由于新节点在父节点内追加，因此缩进效果也建立在父节点已有的缩进基础上。通过叠加的缩进使得整个列表具有了树形结构。图1.7所示是各函数之间的调用关系。


                              

图1.6  基本原理演示页运行效果              图1.7  基本原理演示页函数调用关系

样式的缩进写法为margin-left:10px，表示左边距为10像素。为了表示节点的动态性，增加一个计数器变量counter，用于为每个新创建的子项进行编号。在响应onclick事件时，由于新的子项是包含在父节点内的，所以onclick事件会冒泡响应。为了避免出现这种情况造成创建出多余的子项，通过设置event.cancelBubble = true阻止事件冒泡。这种阻止方式仅适用于IE浏览器，在正式的树形列表中，使用了其他方式避免此问题的发生。下面是基本原理演示页面的详细代码。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<title>动态树形列表基本原理演示</title>

<style>

/* 设置class属性为item的div缩进10px */

div.item {

    margin-left:10px;

}

</style>

 

<script type="text/javascript">

var counter = 1;                                                                  //全局子项计数器

 

//页面加载后立即执行的方法，在menu节点增加3个子项

function init() {

    var menu = document.getElementById("menu");

    addChildren(menu);

}

 

//在传入的pNode节点内追加3个子项

function addChildren(pNode) {

    event.cancelBubble = true;                                     //阻止事件冒泡，避免父层div响应onclick事件

    pNode.appendChild(createNewItem());

    pNode.appendChild(createNewItem());

    pNode.appendChild(createNewItem());

}

 

//创建新的子项

function createNewItem() {

    var _node = document.createElement("div");               //创建1个div节点

 

    //给新建的div节点增加内容，并设置单击后调用addChildren函数

_node.innerHTML =

"<div class='item' onclick='addChildren(this)'>item" + counter + "</div>";

 

    counter++;  //计数器加1

    return _node;

}

</script>

</head>

 

<body onload="init()">

<div id="menu"></div>

</body>

</html>

 

 

wangzhanzhilv
关注
基于AJAX的动态树型结构的设计与实现
02-09 2594
　摘 要:简要介绍了一种通用的，动态树型结构的实现方案，该方案基于Asynchronous JavaScript and XML，结合Struts框架设计实现了结构清晰、扩展性良好的多层架构，数据存储于数据库，结合XML描述树的节点信息，使得任何按预定的XML文档描述的信息都可以通过动态树来展现。　　关键词:MVC模式；Ajax；树型结构；字典序　　树型结构是一类应用非常广泛的数据结构。人类社会中
ajax动态树的实现（核心代码100行以内）
xfy217的专栏
12-31 1049
早就想写一个自己的动态树了，网上也能找到很多，可始终是别人实现的。以前一直没时间，这不年底了，工作任务也完成了，闲着没事就写了这个东西，和大家分享一下一.设计思想：1.布局css+div:好处就不多说了2.利用ajax，当点击树中某个节点时才生成其子节点，这样能避免了客户端一次性加载整棵树,执行速度快3.树的生成用java控制而不是像Dtree的实现是用javascript实现，d
Ajax实现动态获取数据的树状菜单(代码)
08-14
程序将使用Ajax技术实现动态获取数据的树状菜单。当展开菜单时，自动向服务器发送请求，查询该菜单下的子菜单，并在客户端显示子菜单，而无需刷新整个页面。 源码结构说明 1.TreeWiewDemo文件夹下为源文件 2.TreeWiewDemo.war为部署文件
Ajax动态树实现
Magister_Feng的专栏
12-03 2472
<br />一.设计思想： <br /><br />1.布局css+div:好处就不多说了 <br /><br />2.利用ajax，当点击树中某个节点时才生成其子节点，这样能避免了客户端一次性加载整棵树,执行速度快 <br /><br />3.树的生成用java控制而不是像Dtree的实现是用javascript实现，dtree实现的js代码看了你都会头晕，而且这种树是一次性加载，如果你想利用异步请求（ajax）获得一个树，那么实现起来相当麻烦。因为异步请求后执行是在服务器端执行的，js又不能在服务器端执
Ajax-ajax实例3-动态树形列表
weixin_34221073的博客
08-04 206
项目结构：   项目演示：   技术要点： 1.3.2 技术要点在基本原理的介绍中，了解到通过在父节点内动态创建子节点，并利用样式表缩进完成树形列表的基本框架。除了这一点外，还有下面一些问题需要考虑。1 ．将父节点所有的子节点放入一个容器中基本原理页面中仅包含了创建子节点的功能，不可以将创建好的节点再进行关闭操作。实际应用中菜单总是包含打开和关闭两种操作。为了方便进行关闭操作，将子节点放入一个...
树形菜单Ajax实现
09-02
树形菜单Ajax实现 树形菜单Ajax实现
Ajax技术实现树菜单
哲少
05-26 548
1.%@page pageEncoding="GB18030"%>%@page import="com.bjsxt.shopping.category.*, java.util.*"%>List categories = CategoryService.getInstance().getCategories();%> addNode(-1,0,"所有类别","../images/top
ajax动态树的实现
lukezu的博客
06-01 141
一.设计思想： 1.布局css+div:好处就不多说了 2.利用ajax，当点击树中某个节点时才生成其子节点，这样能避免了客户端一次性加载整棵树,执行速度快 3.树的生成用java控制而不是像Dtree的实现是用javascript实现，dtree实现的js代码看了你都会头晕，而且这种树是一次性加载，如果你想利用异步请求（ajax）获得一个树，那么实现起来相当麻烦。因为异步请求后...
动态树形列表基本原理演示
weixin_34162695的博客
12-25 217
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>动态树形...
Ajax获取数据动态树形节点实现
jasstion的专栏
04-18 429
  下面是实现： &lt;%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/
jqueryTreeTable+ajax(构建树形表格)
05-28
jqery.treeTable + ajax + mysql数据库， ssm架构构建树形表格
基于ajax的动态树实现
12-28
基于Struts和ajax开发的动态树效果，点击节点通过ajax异步获取数据库中该节点的子节点并显示
利用Ajax实现动态加载树
09-26
在实际应用中我们经常会用到树,无论是用javascript实现还是用TreeView等控件,都能很好的实现我们所要的功能.但是如果树的节点和层次很多的时候,例如超过2000个节点的时候,一次性把树加载到页面就需要等待很长的时间.为了解决这个问题,我曾经在项目里利用Ajax来动态加载节点,即开始只显示必要的节点,当用户展开树的时候再加载对应的节点......
ajax实现树形结构
12-21
树型结构是一类应用非常广泛的数据结构。人类社会中宗族的族谱和现代企业的组织形式都是树型结构。在计算机领域中,文件系统中文件的管理结构、存储器管理中的页表、数据库中的索引等也都是树型结构。随着Internet的飞速发展，树型结构在浏览器/服务器（Browser/Server，简称B/S）应用系统的应用也越来越广泛。
Ajax特效 动态树形列表 之三
wangzhanzhilv的专栏
11-12 504
 数据库设计本实例使用名为tree的数据库表，包含的数据如图1.8所示，具体的建表语句如下：CREATE TABLE tree (  id int(11) NOT NULL auto_increment,  text varchar(255) NOT NULL,  isfolder varchar(5) NOT NULL default false,
ajax树形展示，JavaScript
06-02
package ajax.ch3.treeview; import javax.servlet.ServletException; import javax.servlet.http.*; import ajax.ch3.treeview.*; public class TreeviewServlet extends HttpServlet { public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, java.io.IOException { String parentID = request.getParameter("parent");//获得id的值 if (parentID!=null&&!parentID.equals(""))//如果不为null和空 { Category category = new Category(Integer.parseInt(parentID));//创建Category对象 TreeviewElement[] top = category.getChildren();//得到该分类的所有下级分类 response.setContentType("text/html"); java.io.PrintWriter out = response.getWriter(); for(int i= 0;i<top.length;i++)//循环显示每个分类 out.println(treeviewRender.renderTreeViewAjax(top[i],false)); } } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, java.io.IOException { doPost(request, response); } }
用ajax显示逐级树形菜单,纯ajax＋sqlserver无限级树形菜单
weixin_26704349的博客
08-05 333
Ajax这个当今流行的技术名词,几年前ajax开始流行时,也花过点时间研究了一下ajax.net控件．只是工作原因，一直没有用到项目中去．一晃几年ajax依旧如火如荼．最近闲来无事，重温ajax．就好象AJAX当初被遗弃，现在又被热捧一样．这次我没有去下载ajax.net,altas等控件．而是从ajax基础看起，呵呵，一种一切从头开始开始感觉．ibm中国开发区翻译的＜掌握Ajax系列＞几篇文章写...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值