JQuery ztree 异步加载实例讲解_jquery

本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情。

因此就需要做异步加载....

准备工作:

1下载 JQuery ZTree

复制其中的JS和CSS即可,其实没必要引那么多,用什么引什么就可以。

2 需要fastJSON,用来转换JSON对象

  我下载JAR包后,引入到Eclipse中总是报找不到class错误。

  解决办法:把jar包放在WEB-INF/lib下即可。

代码实例:

index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
  pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
  <link rel="stylesheet" href="resources/css/demo.css" type="text/css">
  <link rel="stylesheet" href="resources/css/zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="resources/js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="resources/js/jquery.ztree.core-3.5.js"></script>

</head>
<body>
  <div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
  </div>
  <SCRIPT type="text/javascript">
    var setting = {
        data: {
          simpleData: {
            enable: true
          }
        } ,
        async: {
          enable: true,
          url:"/TestZTree/test",
          autoParam:["id", "name", "level"],
          otherParam:{"otherParam":"zTreeAsyncTest"},
          dataFilter: filter
        }
    };
    function filter(treeId, parentNode, childNodes) {
      if (!childNodes) return null;
      for (var i=0, l=childNodes.length; i<l; i++) {
        childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
      }
      return childNodes;
    }
    var zNodes =[
      { id:1, pId:0, name:"parentNode 1", open:true},
      { id:11, pId:1, name:"parentNode 11",isParent:true},
      { id:111, pId:11, name:"leafNode 111"},
      { id:112, pId:11, name:"leafNode 112"},
      { id:12, pId:1, name:"parentNode 12",isParent:true},
      { id:121, pId:12, name:"leafNode 121"},
      { id:13, pId:1, name:"parentNode 13", isParent:true},
      { id:2, pId:0, name:"parentNode 2", isParent:true}
    ]; 

    $(document).ready(function(){
      $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
  </SCRIPT>
</body>
</html>

testServlet.java

package com.test;

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;

public class testServlet extends HttpServlet{
  @Override
  public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doPost(request, response);
  } 

  @Override
  public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String id = request.getParameter("id");
    String name = request.getParameter("name");
    String level = request.getParameter("level");
    String otherParam = request.getParameter("otherParam");
    System.out.println(id + "|" + name + "|" + level + "|" + otherParam); 

    List<HashMap<String,Object>> list = new ArrayList<HashMap<String,Object>>();
    for(int i = 0; i < 5; i++){
      HashMap<String,Object> hm = new HashMap<String,Object>();  //最外层,父节点
      hm.put("id",id+i);//id属性 ,数据传递
      hm.put("name", id+i); //name属性,显示节点名称
      hm.put("pId", id); 

      list.add(hm);
    }
    response.getWriter().write(JSON.toJSONString(list));
  }
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
  xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
  http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 <display-name></display-name>
 <servlet>
  <servlet-name>testServlet</servlet-name>
  <servlet-class>com.test.testServlet</servlet-class>
 </servlet>

 <servlet-mapping>
  <servlet-name>testServlet</servlet-name>
  <url-pattern>/test</url-pattern>
 </servlet-mapping>

 <welcome-file-list>
  <welcome-file>index.jsp</welcome-file>
 </welcome-file-list>
</web-app>

效果图:

以上就是关于jquery异步加载,希望对大家学习jquery程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
异步加载
ztree 异步加载实例、jquery ztree异步加载、jquery ztree异步搜索、jquery ztree 实例、jquery 异步请求实例,以便于您获取更多的相关知识。

时间: 2024-09-08 20:03:11

JQuery ztree 异步加载实例讲解_jquery的相关文章

JQuery ztree带筛选、异步加载实例讲解_jquery

本文实例分享了JQuery ztree带筛选.异步加载实例,供大家参考,具体内容如下 <html> < head> < base href="<%=basePath%>"> <title>My JSP 'ztree.jsp' starting page</title> <link rel="stylesheet" href="zTrees/css/zTreeStyle/zTree

jquery zTree异步加载简单实例讲解_jquery

本文实例讲解了jquery zTree异步加载,分享给大家供大家参考,具体内容如下 web.xml中Servlet配置如下: <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XM

jquery zTree异步加载、模糊搜索简单实例分享_jquery

本文实例为大家讲解了jquery zTree树插件的基本使用方法,具体内容如下 一.节点模糊搜索功能:搜索成功后,自动高亮显示并定位.展开搜索到的节点. 二.节点异步加载:1.点击展开时加载数据:2.选中节点时加载数据. 前台代码如下: <script type="text/javascript"> //ztree设置 var setting = { view: { fontCss: getFontCss }, check: { enable: true }, data:

JQuery ztree 异步加载实践

本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的!原始参考:JQuery异步加载实例,相对来说这篇博客还算规整! springMVC中中文乱码问题:解决办法 准备工作 1 JQuery ZTree,下载地址 复制其中的JS和CSS即可,其实没必要引那么多,用什么引什么就可以. 2 需要fastJSON,用来转换JSON对象,下载地址 我下载JAR包后,引入到Eclipse中总是报找不到cla

jquery zTree异步加载简单实例分享_jquery

首先提供Ztree官方网站http://www.ztree.me. Ztree是一个使用jQuery实现的JSP页面的各种功能树,本文介绍一个异步获取数据到下拉树的实现方式. 当前版本Ztree 3.5.01 simple.html 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>simple.html</title> <meta http-equiv="keywords"

Jquery Ajax异步加载数据和Ztree自带异步加载数据

今天我们来学习Ztree异步加载数据的.我测试的全国城市数据有大概3900条.   我测试了一下Jquery 自带的$.ajax方法和Ztree的setting的async参数,性能上毫秒级别的,但是Ztree的setting的async参数性能上更好一些. 如图: Ztree的setting的async参数说明: autoParam:异步加载时需要自动提交父节点属性的参数.[setting.async.enable = true 时生效] 默认值:[ ]. 这个提交是ztree自带的一个属性的

jQuery Ajax 异步加载显示等待效果代码分享_jquery

AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和XHTML来表示. 2) 使用DOM模型来交互和动态显示. 3) 使用XMLHttpRequest来和服务器进行异步通信. 4) 使用javascript来绑定和调用. 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Reques

关于 jQuery Easyui异步加载tree的问题解析_jquery

想要实现从本地中加载json文件,通过事件来动态的插入到ul中时,遇到了一小bug html中代码是这样的 <ul class="easyui-tree" id="tt"></ul> js中的代码 $(".next-menu:nth-child(1) a").click(function() { var $IDstr = $(this).attr("id"), $treeIDNum = parseInt

ztree异步加载设置isParent:true后没有子节点的父节点循环加载整棵树

问题描述 ztree异步加载设置isParent:true后没有子节点的父节点循环加载整棵树 问下有没有什么解决方案? 解决方案 服务器点判断没有子节点设置isParent为false不就好了? 解决方案二: 初始化setting.async.otherParam = {""zTreeIsLoad"":false}; //加载后 function onAsyncSuccess(event treeId treeNode msg){ var treeObj = $.f