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/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
  http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> 

  <servlet>
    <servlet-name>getDataServlet</servlet-name>;
    <servlet-class>testTree.TestTree</servlet-class>;
  </servlet> 

  <servlet-mapping>
  <servlet-name>getDataServlet</servlet-name>;
  <url-pattern>/getData</url-pattern>;
  </servlet-mapping> 

</web-app> 

JSP页面:

<!DOCTYPE html>
<HTML>
<HEAD>
  <TITLE> ZTREE DEMO - Simple Data</TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="css/demo.css" type="text/css">
  <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="js/jquery.ztree.core-3.2.js"></script>
  <script type="text/javascript" src="js/jquery.ztree.excheck-3.2.js"></script>
  <script type="text/javascript" src="js/jquery.ztree.exedit-3.2.js"></script>
  <SCRIPT type="text/javascript">
    <!--
    var setting = {
      data: {
        simpleData: {
          enable: true
        }
      }
      ,async: {
        enable: true,
        url:"/testJQuery/getData",
        autoParam:["id", "name"],
        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('','');
      }
      return childNodes;
    }
    var zNodes =[
      { id:1, pId:0, name:"parentNode 1", open:true},
      { id:11, pId:1, name:"parentNode 11"},
      { id:111, pId:11, name:"leafNode 111"},
      { id:112, pId:11, name:"leafNode 112"},
      { id:113, pId:11, name:"leafNode 113"},
      { id:114, pId:11, name:"leafNode 114"},
      { id:12, pId:1, name:"parentNode 12"},
      { id:121, pId:12, name:"leafNode 121"},
      { id:122, pId:12, name:"leafNode 122"},
      { id:123, pId:12, name:"leafNode 123"},
      { 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>
 </HEAD> 

<BODY>
<h1>最简单的树 -- 简单 JSON 数据</h1>
<h6>[ 文件路径: core/simpleData.html ]</h6>
<div class="content_wrap">
  <div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
  </div>
</div>
</BODY>
</HTML>

 Action代码:

public class TestTree extends HttpServlet { 

  @Override
  public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//   System.out.println("--------doGet--------");
    this.doPost(request, response);
  } 

  @Override
  public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//   System.out.println("--------doPost--------");
    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); 

    JSONObject json = new JSONObject();
    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);
    } 

    JSONArray arr = new JSONArray(list);
    json.put("success", true);
    json.put("arr", arr); 

    System.out.println("--------json------" + json.toString());
    response.getWriter().write(arr.toString());
//   response.getWriter().write(json.toString());
//   response.getWriter().write("[{pId:'2',name:'20',id:'20'}]");
  } 

} 

以上就是jquery zTree异步加载实例分享给大家,希望对大家学习异步加载技术有所帮助。

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

时间: 2024-12-05 02:04:30

jquery zTree异步加载简单实例讲解_jquery的相关文章

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 zTree异步加载、模糊搜索简单实例分享_jquery

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

JQuery ztree 异步加载实例讲解_jquery

本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 准备工作: 1下载 JQuery ZTree 复制其中的JS和CSS即可,其实没必要引那么多,用什么引什么就可以. 2 需要fastJSON,用来转换JSON对象 我下载JAR包后,引入到Eclipse中总是报找不到class错误. 解决办法:把jar包放在WEB-INF/lib下即可. 代码实例: index.jsp <%@ page language="jav

JQuery ztree 异步加载实践

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

jQuery中借助deferred来请求及判断AJAX加载的实例讲解_jquery

ajax请求异步队列加载我们在开发程序的时候通常会碰到使用ajax加载数据显示到列表的情况.ajax默认使用异步加载(async:true).为什么不使用同步呢,因为ajax同步加载会UI渲染线程阻塞的问题.通常表现为在加载大量数据时由于加载时间过长导致页面不能点击.gif动画卡死以及浏览器崩溃等问题.所以,一般情况下,尽量使用ajax异步加载. 可是,我们有些时候的需求要求ajax同步加载,一个加载完再加载下一个,即所谓的队列.前面我们有说过,同步加载会引起UI渲染阻塞问题.那么我们要怎么实现

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

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

Android App中实现图片异步加载的实例分享_Android

一.概述一般大量图片的加载,比如GridView实现手机的相册功能,一般会用到LruCache,线程池,任务队列等:那么异步消息处理可以用哪呢? 1.用于UI线程当Bitmap加载完成后更新ImageView 2.在图片加载类初始化时,我们会在一个子线程中维护一个Loop实例,当然子线程中也就有了MessageQueue,Looper会一直在那loop停着等待消息的到达,当有消息到达时,从任务队列按照队列调度的方式(FIFO,LIFO等),取出一个任务放入线程池中进行处理. 简易的一个流程:当需

JQuery异步加载PartialView的方法_jquery

本文实例讲述了JQuery异步加载PartialView的方法.分享给大家供大家参考,具体如下: 需求:页面上有dropdown之类的控件,当选择里面不同值的时候,下面关联的内容跟着改变. 思路:把与 dropdown关联的会改变的内容放到PartialView(ascx)里,用JQuery绑定dropdown的change事件,当选择值改变时,用JQuery ajax请求与PartialView相关的Action,得到数据后讲取到的内容覆盖原来的内容. 实现: Model 类: public

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

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