搜索
首页web前端js教程jquery zTree异步加载简单实例分享_jquery

首先提供Ztree官方网站http://www.ztree.me。
Ztree是一个使用jQuery实现的JSP页面的各种功能树,本文介绍一个异步获取数据到下拉树的实现方式。
当前版本Ztree 3.5.01
simple.html

复制代码 代码如下:




simple.html
















    js
    复制代码 代码如下:

    var setting = {
    data: {
    simpleData: {
    enable: true
    // idKey:"id",
    // pIdKey:"pId",
    }
    }
    ,async: {
    enable: true,
    url:"/Java_Solr/servlet/ZTreeSerlvet",
    autoParam:["id", "name"],
    otherParam:{"otherParam":"zTreeAsyncTest"},
    // dataType: "text",//默认text
    // type:"get",//默认post
    dataFilter: filter //异步返回后经过Filter
    }
    ,callback:{
    // beforeAsync: zTreeBeforeAsync, // 异步加载事件之前得到相应信息
    asyncSuccess: zTreeOnAsyncSuccess,//异步加载成功的fun
    asyncError: zTreeOnAsyncError, //加载错误的fun
    beforeClick:beforeClick //捕获单击节点之前的事件回调函数
    }
    };
    //treeId是treeDemo
    function filter(treeId, parentNode, childNodes) {
    if (!childNodes) return null;
    for (var i=0, l=childNodes.length; ichildNodes[i].name = childNodes[i].name.replace('','');
    }
    return childNodes;
    }
    function beforeClick(treeId,treeNode){
    if(!treeNode.isParent){
    alert("请选择父节点");
    return false;
    }else{
    return true;
    }
    }
    function zTreeOnAsyncError(event, treeId, treeNode){
    alert("异步加载失败!");
    }
    function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){

    }
    /***********************当你点击父节点是,会异步访问servlet,把id传过去*****************************/
    var zNodes=[];
    /* 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);
    });

    得到zTree对象 :var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
    ZtreeServlet
    复制代码 代码如下:

    package org.hzy.servlets;
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.ArrayList;
    import java.util.List;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import org.hzy.bean.ZtreeBean;
    import com.alibaba.fastjson.JSON;
    public class ZTreeSerlvet extends HttpServlet {
    public void destroy() {
    super.destroy();
    }
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    System.out.println(request.getParameter("id") + " " + request.getParameter("name") + " " + request.getParameter("otherParam"));
    response.setCharacterEncoding("UTF-8");
    PrintWriter out = response.getWriter();
    ZtreeBean zb = new ZtreeBean(0, -1, "zb", true);
    ZtreeBean zb1 = new ZtreeBean(1, 0, "zb1", true);
    ZtreeBean zb2 = new ZtreeBean(2, 1, "zb2", false);
    ZtreeBean zb3 = new ZtreeBean(2, 0, "zbss", true);
    List list = new ArrayList();
    list.add(zb);
    list.add(zb1);
    list.add(zb2);
    list.add(zb3);
    String str = JSON.toJSONString(list);
    out.print(str);
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doGet(request, response);
    }
    public void init() throws ServletException {
    }
    }
    声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    揭露Ajax异常,解决错误的方法一览揭露Ajax异常,解决错误的方法一览Jan 30, 2024 am 08:33 AM

    Ajax异常大揭秘,如何应对各种错误,需要具体代码示例2019年,前端开发已经成为互联网行业中不可忽视的重要岗位。而Ajax作为前端开发中最常用的技术之一,能够实现页面异步加载和数据交互,其重要性不言而喻。然而,使用Ajax技术时经常会遇到各种错误和异常,如何应对这些错误是每一位前端开发者必须面对的问题。一、网络错误在使用Ajax发送请求时,最常见的错误就是

    有效应对jQuery .val()不起作用的情势有效应对jQuery .val()不起作用的情势Feb 20, 2024 pm 09:36 PM

    标题:解决jQuery.val()不起作用的方法及代码示例在前端开发中,经常会使用到jQuery来操作页面元素。其中,获取或设置表单元素的值是常见的操作之一。通常,我们会使用jQuery的.val()方法来实现对表单元素值的操作。然而,有时候会遇到jQuery.val()不起作用的情况,这可能会导致一些问题。本文将介绍如何有效应对jQuery.val(

    Scrapy基于Ajax异步加载实现方法Scrapy基于Ajax异步加载实现方法Jun 22, 2023 pm 11:09 PM

    Scrapy是一个开源的Python爬虫框架,它可以快速高效地从网站上获取数据。然而,很多网站采用了Ajax异步加载技术,使得Scrapy无法直接获取数据。本文将介绍基于Ajax异步加载的Scrapy实现方法。一、Ajax异步加载原理Ajax异步加载:在传统的页面加载方式中,浏览器发送请求到服务器后,必须等待服务器返回响应并将页面全部加载完毕才能进行下一步操

    Vue3中的suspense函数详解:优化异步数据加载Vue3中的suspense函数详解:优化异步数据加载Jun 18, 2023 am 08:10 AM

    Vue3中的suspense函数详解:优化异步数据加载在现代网站和应用程序中,异步数据加载是必不可少的。但是,由于网络连接速度的不稳定性,异步数据加载可能导致用户界面的延迟和卡顿。为了解决这个问题,Vue3引入了一个新的suspense函数来优化异步数据加载。suspense函数是Vue3中的一个新特性,它允许您在异步加载数据时展示一个加载中的UI,直到异步

    Vue3中的defineAsyncComponent函数详解:异步加载组件的应用Vue3中的defineAsyncComponent函数详解:异步加载组件的应用Jun 18, 2023 pm 07:39 PM

    Vue3中的defineAsyncComponent函数详解:异步加载组件的应用在Vue3中,我们经常会遇到异步加载组件的需求。这时我们就可以使用Vue3提供的defineAsyncComponent函数来实现异步加载组件的功能。本文将详细介绍Vue3中defineAsyncComponent函数的用法和应用场景。一、defineAsyncComponent

    Vue3中的defineAsyncComponent函数:异步加载组件Vue3中的defineAsyncComponent函数:异步加载组件Jun 18, 2023 am 10:57 AM

    Vue3是一个非常流行的前端框架,它将组件化思想带入到前端开发中,使得开发者能够更快速、更高效地构建复杂的应用程序。在Vue3中,我们经常会使用组件来构建页面,并且使用大量的第三方组件库来扩展我们的功能。但是,加载多个组件可能会导致应用程序的启动速度变慢,这就是为什么我们需要异步加载组件。在Vue3中,提供了一个函数叫做defineAsyncComponen

    提升网站速度的关键优化模式,每个前端开发者都必须掌握!提升网站速度的关键优化模式,每个前端开发者都必须掌握!Feb 02, 2024 pm 05:36 PM

    前端开发者必备:掌握这些优化模式,让网站飞起来!随着互联网的快速发展,网站已经成为企业宣传和交流的重要渠道之一。一个性能优良、加载迅速的网站不仅可以提升用户体验,还可以吸引更多的访问者。作为一名前端开发者,掌握一些优化模式是必不可少的。本文将介绍一些常用的前端优化技术,帮助开发者更好地优化网站。压缩文件在网站开发中,经常使用的文件类型包括HTML、CSS和J

    揭秘网站性能优化:掌握这些方法,让你的网站速度飞升!揭秘网站性能优化:掌握这些方法,让你的网站速度飞升!Feb 03, 2024 am 08:00 AM

    网站性能优化大揭秘:掌握这些方式,让你的网站飞起来!随着互联网的快速发展,网站已经成为企业宣传、产品展示和交流互动的重要渠道。然而,当用户访问网站时,如果加载速度过慢、响应时间过长,用户体验将会大打折扣,甚至可能直接导致用户离开。因此,网站性能优化变得越来越重要。那么,什么是网站性能优化呢?简单来说,网站性能优化是通过一系列的方式和技术手段,提升网站的加载速

    See all articles

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序,用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    AI Hentai Generator

    AI Hentai Generator

    免费生成ai无尽的。

    热门文章

    R.E.P.O.能量晶体解释及其做什么(黄色晶体)
    2 周前By尊渡假赌尊渡假赌尊渡假赌
    仓库:如何复兴队友
    4 周前By尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒险:如何获得巨型种子
    3 周前By尊渡假赌尊渡假赌尊渡假赌

    热工具

    DVWA

    DVWA

    Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

    Atom编辑器mac版下载

    Atom编辑器mac版下载

    最流行的的开源编辑器

    Dreamweaver Mac版

    Dreamweaver Mac版

    视觉化网页开发工具

    PhpStorm Mac 版本

    PhpStorm Mac 版本

    最新(2018.2.1 )专业的PHP集成开发工具

    SecLists

    SecLists

    SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。