> 웹 프론트엔드 > JS 튜토리얼 > jquery zTree 비동기 로딩 간단한 예제 Sharing_jquery

jquery zTree 비동기 로딩 간단한 예제 Sharing_jquery

WBOY
풀어 주다: 2016-05-16 17:42:14
원래의
1180명이 탐색했습니다.

먼저 Ztree 공식 웹사이트 http://www.ztree.me를 제공하세요.
Ztree는 jQuery를 사용하여 구현된 JSP 페이지의 다양한 기능 트리입니다. 이 기사에서는 드롭다운 트리로 데이터를 비동기적으로 가져오는 구현 방법을 소개합니다.
현재 버전 Ztree 3.5.01
simple.html

코드 복사 코드는 다음과 같습니다.



simple.html -equiv= "keywords" content="keyword1,keyword2,keyword3">
"content- type" content="text/html; charset=UTF-8">
🎜>< ;script type="text/javascript" src="js/jquery.js">


" src= "js/1.js">






    js




    코드 복사


    코드는 다음과 같습니다.
    var 설정 = { data: { simpleData: { enable: true // idKey: "id",
    // pIdKey: "pId",
    }
    }
    , async: {
    활성화: true,
    url:"/Java_Solr/servlet/ZTreeSerlvet",
    autoParam:["id", "name"],
    otherParam:{"otherParam":"zTreeAsyncTest"},
    // dataType: " text",//기본 텍스트
    // type: "get",//기본 게시물
    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("부모를 선택하세요. node");
    false 반환;
    }else{
    true 반환;
    }
    }
    function zTreeOnAsyncError(event, treeId, treeNode){
    alert("Asynchronous 로드 실패!");
    }
    function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){

    }
    /***********************부모 노드를 클릭하면 서블릿이 비동기적으로 액세스되고 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, 이름:"leafNode 113"},
    { id:114, pId:11, 이름:"leafNode 114"},
    { id:12, pId:1, 이름:" parentNode 12"},
    { id:121, pId:12, name:"leafNode 121"},
    { id:122, pId:12, name:"leafNode 122"},
    { id :123, pId:12, 이름:"leafNode 123"},
    { id:13, pId:1, 이름:"parentNode 13", isParent:true},
    { id:2, pId:0 , 이름:"parentNode 2" , isParent:true}
    ] */
    $(document).ready(function(){
    $.fn.zTree.init($("#treeDemo" ), 설정, zNodes)
    });


    zTree 객체 가져오기: var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
    ZtreeServlet



    코드 복사


    코드는 다음과 같습니다.

    패키지 org.hzy.servlets;
    java.io.IOException 가져오기;
    java.io.PrintWriter 가져오기;
    java.util.ArrayList 가져오기;
    java.util.List 가져오기;
    javax.servlet.ServletException 가져오기;
    javax.servlet.http.HttpServlet 가져오기;
    javax.servlet.http.HttpServletRequest 가져오기;
    javax.servlet.http.HttpServletResponse 가져오기;
    org.hzy.bean.ZtreeBean 가져오기;
    com.alibaba.fastjson.JSON 가져오기;
    공용 클래스 ZTreeSerlvet은 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 출력 = 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 = 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()에서 ServletException 발생 {
    }
    }
    관련 라벨:
    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    최신 이슈
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿