jQuery 动态加载树

kaobian

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

最近访客更多访客>>

smh0310

tom2139779

smiles_man

lucifer_xtt

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

JavaScript Servlet CSS Ajax jQuery

本案例中用到了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.rar (53.6 KB)
下载次数: 682

分享到：

jQuery 实现的遮罩层效果 | JS 正则表达式验证中文和英文字母

2011-05-19 17:00
浏览 3400
评论(2)
论坛回复 / 浏览 (4 / 7807)
分类:Web前端
查看更多

2 楼蓝屏格式化 2011-12-09

用不了。。。。。

1 楼无恨星晨 2011-05-28

学习收藏支持一下！

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论