本案例中用到了jquery的 tree插件，在本文的附件中可以下载
jsp代码：
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
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="css/tree/jquery.treeview.css" />
<link rel="stylesheet" href="css/tree/red-treeview.css" />
<link rel="stylesheet" href="css/tree/screen.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/tree/jquery.cookie.js"></script>
<script type="text/javascript" src="js/tree/jquery.treeview.js"></script>
<script type="text/javascript" src="js/tree/jquery.treeview.async.js"></script>
<script type="text/javascript">
function initTrees() {
$("#mixed").treeview({
url: "Tree",
ajax: {
data: {
"additional": function() {
return "yeah: " + new Date;
}
},
type: "post"
}
});
}
$(document).ready(function(){
initTrees();
$("#refresh").click(function() {
$("#mixed").empty();
initTrees();
});
});
</script>
</head>
<body>
<ul id="mixed">
</ul>
<button id="refresh">Refresh both Trees</button>
</body>
</html>
=-=====================
java代码：本人用的是 servlet
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;
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 {
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
String re = "[{'text':'root','expanded':false,'children':[{'text':'1.1 jQuery core'},{'text':'1.2 my jQuery Tree'}]}" +
",{'text':'2 hhh'},{'text':'3 xxx'}]";
out.flush();
System.out.println(re);
out.write(re);
out.close();
}
}
分享到：
相关推荐
jquery 动态加载树
本人这段时间正巧要做一个省市县的树状结构图，公司之前用的dtree实现起来效率太低，半天打不开页面，于是考虑用jquery动态加载，通过网上查资料，学习别人的列子，现将本人所整理的树状结构实例上传。测试数据库为...
Jquery Ztree 动态树 测试通过
此代码包里面包含了jquery实现动态添加生成页面树菜单terr
JQUERY+jSON动态加载树
jQuery动态菜单列表（树），简单实用。与layui、easyui等前端框架，能很好的整合。
在项目中经常会用到tree，例如分类，用户组等等。 在实现的时候也会有很多的方法，例如可以用extjs，jquery treeview等一些js开发包。...这里我做了一个例子，是一个完整的应用例子，可以动态的对这棵树进行维护
Jquery TreeView支持大数据加载树,全源码，自己测试通过，性能良好。
raydreams.js是一款基于Bootstrap的jquery动态数据表格插件。该jquery动态数据表格的特点是使用简单，它能通过json动态加载表格所需的数据，并通过配置参数设置表格列是否排序和添加功能按钮等。
运行环境：Tomcat6.0 JDK:1.6 IE:5.0以上 其中包括源代码
jQuery无限级ajax加载树形菜单代码，通过ajax调用方法异步获取json数据内容生成无限级树形菜单，可自定义编辑添加菜单项。
jquery做的多级树，可以自己再添加。js加css实现，未联到数据库。
jQuery不同树叶掉落特效代码，点击“添加更多树叶按钮”可以在顶部添加叠加更多的树叶，点击树叶会立刻掉落。
jquery dtree 实例 无限树形菜单 实现增删改查
支持懒加载，解决了大数据量显示效率的问题； 提供表格树回调接口，方便实现自己的业务； 优化以前表格树代码，并且公开源码。
Jquery EasyUI 异步树，适合大数据量无限级加载
highchecktree是一款使用指定源数据生成带复选框的树形结构的jQuery插件。该树形结构插件对于在大数据的处理上性能十分出色。它使用懒加载的形式来提供性能，子节点会在点击时才去加载数据。
很好的jquery树形表格插件，数据量大的情况下可逐级加载子节点
NULL 博文链接：https://zhaozhi3758.iteye.com/blog/1399229
完整的jquery easyui tree 树形列表节点异步加载demo，比官方demo详细得多。是前后台交互的web应用。