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 相关文章推荐
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 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
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
禁止你的左键复制实用技巧
2013/01/04 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
Python单元测试框架unittest简明使用实例
2015/04/13 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
家居饰品店创业计划书
2014/01/31 职场文书
法定代表人授权委托书
2014/04/04 职场文书
平安建设工作方案
2014/06/02 职场文书
欢迎标语大全
2014/06/21 职场文书
建筑工地文明标语
2014/10/09 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
整脏治乱工作简报
2015/07/21 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android