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


Posted in Javascript onFebruary 25, 2016

本文实例讲解了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异步加载实例分享给大家,希望对大家学习异步加载技术有所帮助。

Javascript 相关文章推荐
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 Javascript
javascript使用canvas实现饼状图效果
Sep 08 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 #Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 #Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 #Javascript
jquery ztree实现模糊搜索功能
Feb 25 #Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 #Javascript
jquery实现列表上下移动功能
Feb 25 #Javascript
js简单判断移动端系统的方法
Feb 25 #Javascript
You might like
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
php-fpm配置详解
2014/02/12 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
flexigrid 参数说明
2010/11/23 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
Python常见异常分类与处理方法
2017/06/04 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
详解Python_shutil模块
2019/03/15 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
医药大学生求职简历的自我评价
2013/10/17 职场文书
实习鉴定范文
2013/12/19 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript