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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
js setattribute批量设置css样式
Nov 26 Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
Javascript浅谈之this
Dec 17 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 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 表单提交给自己
2008/07/24 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
python检测是文件还是目录的方法
2015/07/03 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
django url到views参数传递的实例
2019/07/19 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
python os.listdir()乱码解决方案
2021/01/31 Python
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
实习教师自我鉴定
2013/09/27 职场文书
应届护士求职信范文
2014/01/26 职场文书
房产委托公证书
2014/04/08 职场文书
爱情保证书大全
2014/04/29 职场文书
环保建议书100字
2014/05/14 职场文书
2015年推普周活动总结
2015/03/27 职场文书
电信营业员岗位职责
2015/04/14 职场文书
追讨欠款律师函
2015/05/27 职场文书
酒店温馨提示语
2015/07/14 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python