首页 > 程序开发 > web前端 > JavaScript >

jQuery异步生成树

2011-09-13

这个树是用zTree这个插件搞定的!代码如下页面代码:Jsp代码<%@ page language="java" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"...

这个树是用zTree这个插件搞定的!代码如下
页面代码:
Jsp代码
<%@ 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>

<%@ 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代码:
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 += "{&#39;id&#39;:&#39;root&#39;,&#39;name&#39;:&#39;根节点&#39;,&#39;icon&#39;:&#39;"+request.getContextPath()+"/zTree/logout.jpg&#39;,&#39;isParent&#39;:true},";
}else {
for (int i = 1; i < 3 ; i++) {
String nId = pId + i;
String nName = nId;
str += "{&#39;id&#39;:&#39;"+nId + "&#39;,&#39;name&#39;:&#39;"+nName + "&#39;,&#39;icon&#39;:&#39;&#39;" + ",&#39;isParent&#39;:" + (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();
}
}

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 += "{&#39;id&#39;:&#39;root&#39;,&#39;name&#39;:&#39;根节点&#39;,&#39;icon&#39;:&#39;"+request.getContextPath()+"/zTree/logout.jpg&#39;,&#39;isParent&#39;:true},";
}else {
for (int i = 1; i < 3 ; i++) {
String nId = pId + i;
String nName = nId;
str += "{&#39;id&#39;:&#39;"+nId + "&#39;,&#39;name&#39;:&#39;"+nName + "&#39;,&#39;icon&#39;:&#39;&#39;" + ",&#39;isParent&#39;:" + (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文档!

作者“80后的辛酸”

相关文章
最新文章
热点推荐