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 动态加载树,布布扣,bubuko.com

时间: 2024-10-25 00:18:10

jQuery 动态加载树的相关文章

jquery动态加载问题

对于append的元素,原有的方法不生效 解决:用on方法 找到的:http://www.zhidao91.com/jquery-html-live-on/ 解决使用jQuery采用append添加的元素事件无效的方法 2014年09月22日 | jQuery | 浏览: 1,118 当我们使用jQuery动态加载html元素,但是元素上面又绑定了Click等事件,针对新添加的元素这些事件是无效的,那么应该怎样解决呢? live方法 live( type, fn )jQuery 1.3中新增的方

ExtJS 动态加载树treepanel

先来看看效果: 一.新建一个TreeStore,并添加根节点 Ext.define('Demo1.store.TreeDemoStore', { extend: 'Ext.data.TreeStore', root: { text: '目录树', id: 0 } }); 二.在view中添加treepanel,绑定TreeDemoStore Ext.define('Demo1.view.MyViewport', { extend: 'Ext.container.Viewport', initCo

JQuery 动态加载iframe.

html: <iframe id="ifm" style="width:inherit;height:inherit" runat="server" ></iframe> <li data-options="iconCls:'icon-search'"> <a href="javascript:void(0)" onclick="showdata()&qu

【JS】【9】使用jQuery动态加载js文件

正文: 用法: jQuery.getScript("/path/to/myscript.js") .done(function() { /* 耶,没有问题,这里可以干点什么 */ }) .fail(function() { /* 靠,马上执行挽救操作 */ }); 例子:延迟加载一个js插件,而且在加载完成时执行它 jQuery.getScript("jquery.cookie.js") .done(function() { jQuery.cookie("

jQuery动态加载JS以减少服务器压力

如果您要创建一个web2.0的应用程序,那么你的网页会包括大量的JavaScript文件,这些可能会拖慢您的网页.因此,动态加载JavaScript代码到您的网页是一个好主意,即只有当实用他们的时候加载它们.这种策略可以帮助你减少你的网页的加载时间. 幸运的是,jQuery提供了一个内置的实用函数,$getScript()为我们提供了这样的方法.来实现在网页动态的功能.来看看这个函数的语法: $.getScript(url,callback) 获取url参数所指定的脚本,使用一个GET请求到指定

使用jQuery动态加载js脚本文件的方法

动态加载Javascript是一项非常强大且有用的技术.这方面的主题在网上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js 它们很强大,但有时候也会得不偿失.如果你使用的是jQuery,它里面有一个内置的方法可以用来加载单个js文件.当你需要延迟加载一些js插件或其它类型的文件时,可以使用这个方法.下面就介绍一下如何使用它! 一.jQuery getScript()方法加载JavaScript jQuery内置了一个方法可以加载单一的js文件:当加载完成后你可以

jquery动态加载js/css文件方法

先来看jquery自带的getSrcript文件 方法 代码如下 复制代码 $.getScript(url,callback) 实例 代码如下 复制代码 var testVar = 'New JS loaded!'; alert(testVar); function newFun(dynParam) { alert('You just passed '+dynParam+ ' as parameter.'); } 动态调用方法 HTML代码 代码如下 复制代码 <script type="

jQuery动态加载js脚本文件

jQuery getScript()方法加载JavaScript jQuery.getScript("/path/to/myscript.js", function(data, status, jqxhr) { /* 做一些加载完成后需要执行的事情 */ }); jQuery.getScript("/path/to/myscript.js") .done(function() { /* 耶,没有问题,这里可以干点什么 */ }) .fail(function() {

jQuery动态加载select下拉列表

说明:以前使用的select下拉列表都是静态的,select 的option数据都是写死的.现在项目中的select需要根据不同的场景使用不同的数据,解决方式就是动态加载option数据. 下面步骤介绍了如何从数据库获取数据,并动态的在前端显示. 步骤一:jsp页面静态的select: <div> <select id="selectSM"> <option>选择A</option> <option>选择B</optio