首页 > 代码库 > jQuery 动态加载树

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="http://www.mamicode.com/">
    <title>jQuery Tree </title>
    <link rel="stylesheet" href="http://www.mamicode.com/css/tree/jquery.treeview.css" />
    <link rel="stylesheet" href="http://www.mamicode.com/css/tree/red-treeview.css" />
    <link rel="stylesheet" href="http://www.mamicode.com/css/tree/screen.css" />
    

    
    <script type="text/javascript" src="http://www.mamicode.com/js/jquery.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/js/tree/jquery.cookie.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/js/tree/jquery.treeview.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/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)
<iframe id="google_ads_frame2" vspace="0" height="250" marginHeight="0" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3447371224873639&output=html&h=250&slotname=8660799060&adk=1970350646&w=300&lmt=1401086059&flash=0&url=http%3A%2F%2Fwww.cnblogs.com%2Franzige%2Fp%2F3748083.html&dt=1401086062139&shv=r20140520&cbv=r20140417&saldr=sb&correlator=1401086061839&frm=20&ga_vid=1304086684.1400769066&ga_sid=1401080712&ga_hid=791090037&ga_fc=1&u_tz=480&u_his=178&u_java=1&u_h=768&u_w=1364&u_ah=740&u_aw=1364&u_cd=16&u_nplug=0&u_nmime=0&dff=tahoma&dfs=12&adx=0&ady=2369&biw=314&bih=74&eid=317150304&oid=3&rx=0&eae=0&docm=9&vis=0&fu=0&ifi=2&xpc=Ht17bRtczc&p=http%3A//www.cnblogs.com&dtd=41" frameBorder="0" width="300" allowTransparency="true" name="google_ads_frame2" marginWidth="0" scrolling="no" hspace="0"></iframe><iframe id="google_ads_frame3" vspace="0" height="250" marginHeight="0" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3447371224873639&output=html&h=250&slotname=8660799060&adk=1970350646&w=300&lmt=1401086059&flash=0&url=http%3A%2F%2Fwww.cnblogs.com%2Franzige%2Fp%2F3748083.html&dt=1401086062188&shv=r20140520&cbv=r20140417&saldr=sb&prev_slotnames=8660799060&correlator=1401086061839&frm=20&ga_vid=1304086684.1400769066&ga_sid=1401080712&ga_hid=791090037&ga_fc=1&u_tz=480&u_his=178&u_java=1&u_h=768&u_w=1364&u_ah=740&u_aw=1364&u_cd=16&u_nplug=0&u_nmime=0&dff=tahoma&dfs=12&adx=304&ady=2619&biw=314&bih=74&eid=317150304&oid=3&rx=0&eae=0&docm=9&vis=0&fu=0&ifi=3&xpc=IYJpsiik65&p=http%3A//www.cnblogs.com&dtd=42" frameBorder="0" width="300" allowTransparency="true" name="google_ads_frame3" marginWidth="0" scrolling="no" hspace="0"></iframe>