jQuery异步生成树

kaobian

浏览: 212272 次
性别:
来自: 哈尔滨

最近访客更多访客>>

smh0310

tom2139779

smiles_man

lucifer_xtt

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript
jQuery
zTree

jquery树 zTree 异步树

这个树是用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文档！

JQuery.rar (335.3 KB)
下载次数: 328

4
顶

1
踩

分享到：

伤不起的小学乘法 | jquery.each 兼容IE,firefox

2011-09-13 09:40
浏览 2441
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery异步生成树

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery异步生成树

评论

发表评论

相关推荐

Extjs combobox 自动提示

聊聊JS中的RegExp的exec方法

jquery.each 兼容IE,firefox

遍历json 对象的属性并且动态添加属性

改良后的《js鼠标点击位置 弹出层由中心向四周缓慢扩大》

js 实现的简单选项卡 原理(支持IE)

js鼠标点击位置 弹出层由中心向四周缓慢扩大

jQuery 实现的遮罩层效果

jQuery 动态加载树

JS 正则表达式 验证中文和英文字母

js 判断浏览器类型

js parseFloat 减法小数过多解决方法

Extjs 动态加载树

SWFUpload+struts2 进度条

js 处理中文乱码

jQuery autocomplete 处理json 返回值形式的demo

jQuery 滑出层

jQuery的each方法小结

js 产生随机数 通用写法

最近访客更多访客>>

改良后的《js鼠标点击位置弹出层由中心向四周缓慢扩大》

js 实现的简单选项卡原理(支持IE)

js鼠标点击位置弹出层由中心向四周缓慢扩大

JS 正则表达式验证中文和英文字母

js 产生随机数通用写法