`
kaobian
  • 浏览: 211374 次
  • 性别: Icon_minigender_1
  • 来自: 哈尔滨
社区版块
存档分类
最新评论

jQuery异步生成树

阅读更多
这个树是用zTree这个插件搞定的!代码如下
页面代码:
<%@ page language="java"  pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>jQuery Tree </title>
    
    <link rel="stylesheet" href="zTree/demoStyle/demo.css" type="text/css">
  	<link rel="stylesheet" href="zTree/zTreeStyle/zTreeStyle.css" type="text/css">
  	<script type="text/javascript" src="zTree/jquery-1.4.2.js"></script>
  	<script type="text/javascript" src="zTree/jquery.ztree-2.6.js"></script>
    
    <SCRIPT LANGUAGE="JavaScript">
		var zTree1;
		var setting  = {
			checkable: false,
			async: true,
			asyncUrl: "Tree",   							//获取节点数据的URL地址
			asyncParam: ["name", "id"],       		//获取节点数据时,必须的数据名称,例如:id、name
			asyncParamOther: ["test","true"] , 		//其它参数 ( key, value 键值对格式)
			callback : {
	      		click: function (event, treeId, treeNode){
	      			 // zTree1.expandNode(treeNode, true, false);
	      		} ,
	      		expand : function (event, treeId, treeNode){
	      		},
	      		collapse:function (event, treeId, treeNode){
	      		}
    		} 
		};
		function refreshTree() { 
			zTree1 = $("#treeDemo").zTree(setting );
		}     
		$(document).ready(function(){
			refreshTree();
		});
  </SCRIPT>
 </HEAD>
<BODY>
			<ul id="treeDemo" class="tree" style="height:500px;width:300px;"></ul>
 </BODY>
</HTML>



java代码:
package com;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")
public class Tree extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
	   try {
		    String pId 		= request.getParameter("id");
			String pName 	= request.getParameter("name");
			//延迟,让loading 显示出来
			for (int i = 0; i < 9999; i++) { }
			
			
			//构造数据,可以从数据库中查询
			String str = "[" ;
			if (pId == null  || pName == null){
				pId = "0";
				pName = "";
				str  += "{'id':'root','name':'根节点','icon':'"+request.getContextPath()+"/zTree/logout.jpg','isParent':true},"; 
			}else {
				for (int i = 1; i < 3 ; i++) {
					String nId 		= pId + i;
					String nName  =  nId;
					str  += "{'id':'"+nId + "','name':'"+nName + "','icon':''" + ",'isParent':" + (i % 2 == 0 ? false:true) + "},"; 
				}					 
			}
			str = str.substring(0,str.length()-1) + "]";
	    	reponse(request,response,str );
	   } catch (Exception e) {
		   e.printStackTrace();
	   }
	}
	
	public void reponse(HttpServletRequest request, HttpServletResponse response,Object msg) throws Exception{
		response.setContentType("text/plain");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		out.write(msg.toString());
		out.flush();
		out.close();
	}
}


这篇博客是因为以为网友提出的,所以就做了这个demo,这个也是根据zTree例子中的一个改写的,同志们如果这个插件感兴趣,可以仔细阅读源码、例子和api文档!
4
1
分享到:
评论

相关推荐

    jquery动态生成树

    本示例代码“jquery动态生成树”是关于如何利用jQuery和相关技术,如Struts2、treeview插件及JSON数据格式,来动态地在网页上构建一个可交互的目录树结构。 首先,让我们详细了解一下每个组件的作用: 1. **jQuery...

    jQuery动态生成树的案例

    在本文中,我们将深入探讨如何使用jQuery库动态生成树形结构,特别关注一个具体的案例。jQuery是一个轻量级的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。在Web开发中,树形结构常用于...

    jQuery Treeview异步树实现

    在这个异步树实现中,我们专注于如何在jQuery Treeview中集成异步加载功能,特别是与.NET 3.5及以上版本的后端接口协同工作。 异步加载对于大型数据集至关重要,因为它允许用户逐步加载数据,而不是一次性加载所有...

    JQuery实例动态生成树

    在网页开发中,jQuery是一个非常流行的JavaScript库...总之,jQuery动态生成树形结构涉及HTML结构、JSON数据处理、事件绑定以及可能的异步加载。通过熟练掌握这些技能,开发者可以创建出功能丰富、交互性强的树状界面。

    Easyui异步生成树节点,动态获取树节点

    在本项目中,我们将关注“异步生成树节点,动态获取树节点”的功能实现。 1. **EasyUI Tree 组件** EasyUI 中的 Tree 组件可以展示层级结构的数据,常用于菜单、目录等场景。它支持通过 JSON 数据源或者 AJAX 异步...

    struts2.0+ztree+jquery动态生成树结构

    在提供的两个文件"struts+ztree+jquery动态生成树结构1.txt"和"struts+ztree+jquery动态生成树结构2.txt"中,很可能是分别展示了这两种方法的具体实现细节,包括Action的代码示例、前端的jQuery代码和ZTree的配置。...

    dtree+jquery动态生成树

    【dtree+jquery动态生成树】是一个用于创建交互式树形结构的JavaScript库,结合了jQuery框架的强大功能,使得在网页上动态展示层次结构数据变得简单。本实例着重于实现菜单树的生成,这对于构建多级导航系统尤其有用...

    Dtree+Jquery动态生成树节点

    在"Dtree Jquery动态生成树节点"这个主题中,我们可以探讨以下几个关键知识点: 1. **DTree的初始化**:在HTML中添加一个空的div元素作为DTree的容器,然后在JavaScript中使用JQuery选择该元素,并调用DTree的初始...

    Dtree+Jquery动态生成树节点.

    在动态生成树节点的场景中,jQuery用于选取HTML元素、绑定事件监听器、修改DOM结构以及执行异步请求获取数据。 3. **JSON数据**:JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写...

    Jquery动态生成树形列表[收集].pdf

    在本文中,我们将深入探讨如何使用jQuery动态生成树形列表,这是一个常见的前端开发任务,尤其在构建具有层次结构的数据展示时。首先,我们要理解整个实现过程的思路: 1. **服务器端处理**: - 服务端从数据库中...

    jquery+sql动态生成树

    在动态生成树的应用中,jQuery负责在前端处理用户交互,例如点击节点展开或收缩子节点,以及异步加载数据。 SQL(Structured Query Language)是用于管理和处理关系数据库的标准语言。在这里,它被用来从服务器上的...

    dtreeJQuery实例.动态生成树

    动态生成树】是一个基于jQuery库的动态树形菜单插件,它主要用于在网页中创建交互式的、可展开和折叠的层级结构。这种树状菜单在很多场景下都非常实用,比如网站导航、数据分类展示或者文件目录浏览等。本文将深入...

    Jquery EasyUI 异步树,适合大数据量无限级加载

    本文将深入探讨“Jquery EasyUI 异步树”这一主题,特别是如何实现适合大数据量无限级加载的功能。 首先,我们来看“异步树”这一概念。在用户界面上,树形结构常用于展示层级关系的数据,如组织架构、目录结构等。...

    JQuery 实现XML树形菜单

    \n\n**直接在页面写代码实现树形菜单**\n\n这种方式是基础方法,直接在HTML页面中通过jQuery读取XML文件并解析,然后动态生成树形结构。首先,需要在HTML文件中引入jQuery库(如`jquery-1.2.6.js`),然后编写...

    jquery-easyui_combotree异步树的生成代码

    ### jQuery-EasyUI Combotree 异步树生成详解 #### 一、Combotree 组件简介 在jQuery EasyUI框架中,Combotree组件是一个非常实用的功能组件,它结合了下拉列表(Combobox)与树形结构(Tree)的特点,能够实现...

    异步树生成

    在本篇中,我们将深入探讨如何使用jQuery实现异步树节点的生成,以及相关的关键技术。 首先,我们需要理解“异步”这个词在编程中的含义。在Web开发中,异步通常指的是非阻塞式的数据处理方式,即在等待服务器响应...

    Java>jquery-easyui_combotree异步树的生成代码示例(NEW)

    ### Java与jQuery-EasyUI Combotree异步树生成代码示例详解 #### 一、概述 在实际项目开发过程中,经常会遇到需要展示层级结构数据的情况,如组织架构、产品分类等。`jQuery EasyUI Combotree`组件因其简单易用、...

    dtree+jquery动态树的生成(二)

    结合dtree和jQuery,我们可以实现后台动态生成树结构的数据,然后通过Ajax请求传递到前端展示。 具体步骤如下: 1. **数据库设计**:在Oracle数据库中,我们需要创建一个或多个表来存储树结构的数据,如id、父id、...

    jquery无限分类树实现

    利用这些功能,我们可以动态生成树节点。例如,为每个分类创建一个`&lt;li&gt;`元素,并根据其层级关系嵌套在相应的`&lt;ul&gt;`元素中。 3. **TreeView插件**:为了实现可交互的树视图,可以使用第三方jQuery插件,如jQuery UI...

    jquery-easyui_combotree异步树的生成代码示例(NEW)

    ### jQuery EasyUI Combotree 异步树生成详解 #### 一、概述 在Web开发中,树形结构是常用的数据展示方式之一,特别是在需要层级显示数据时尤为常见。jQuery EasyUI 是一个基于 jQuery 的 UI 插件集合,它简化了...

Global site tag (gtag.js) - Google Analytics