Home > Web Front-end > JS Tutorial > jquery zTree asynchronous loading simple example sharing_jquery

jquery zTree asynchronous loading simple example sharing_jquery

WBOY
Release: 2016-05-16 17:42:14
Original
1203 people have browsed it

First provide the Ztree official website http://www.ztree.me.
Ztree is a tree of various functions of a JSP page implemented using jQuery. This article introduces an implementation method for asynchronously obtaining data into a drop-down tree.
Current version Ztree 3.5.01
simple.html

Copy code The code is as follows:




simple.html





< ;script type="text/javascript" src="js/jquery.js">










    js
    Copy code The code is as follows:

    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",//Default text
    // type: "get",//Default post
    dataFilter: filter //After asynchronous return, filter
    }
    ,callback:{
    / / beforeAsync: zTreeBeforeAsync, // Get the corresponding information before the asynchronous loading event
    asyncSuccess: zTreeOnAsyncSuccess, // The asynchronously loaded fun
    asyncError: zTreeOnAsyncError, // Load the wrong fun
    beforeClick:beforeClick //Capture Event callback function before clicking the node
    }
    };
    //treeId is 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("Please select the parent node");
    return false;
    }else{
    return true;
    }
    }
    function zTreeOnAsyncError(event, treeId, treeNode){
    alert("Asynchronous loading failed!");
    }
    function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){

    }
    /***********************When you click on the parent node, the servlet will be accessed asynchronously and the ID will be passed *************** ****************/
    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);
    });

    Get zTree object: var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
    ZtreeServlet
    Copy code The code is as follows:

    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 {
    }
    }
    Related labels:
    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template