Ztree是一个使用jQuery实现的JSP页面的各种功能树

Ztree是三个利用jQuery达成的JSP页面包车型客车各样功用树,本文介绍三个异步获取数据到下拉树的完成格局。

此时此刻版本Ztree 3.5.01

simple.html

[html]Ztree是一个使用jQuery实现的JSP页面的各种功能树。  

<!DOCTYPE html>  

Ztree是一个使用jQuery实现的JSP页面的各种功能树。<html>  

  <head>  

    <title>simple.html</title>  

      

    <meta http-equiv=”keywords”
content=”keyword1,keyword2,keyword3″>  

    <meta http-equiv=”description” content=”this is my page”>  

Ztree是一个使用jQuery实现的JSP页面的各种功能树。    <meta http-equiv=”content-type” content=”text/html;
charset=UTF-8″>  

      

    <link rel=”stylesheet” type=”text/css”
href=”css/zTreeStyle.css”>  

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

    <script type=”text/javascript”
src=”js/jquery.ztree.core-3.5.js”></script>  

    <script type=”text/javascript”
src=”js/jquery.ztree.excheck-3.5.min.js”></script>  

<!–     <script type=”text/javascript”
src=”js/standard.js”></script> –>  

    <script type=”text/javascript” src=”js/1.js”></script>  

  </head>  

    

  <body>  

    <ul id=”treeDemo” class=”ztree”></ul>  

  </body>  

</html>  

 

js

[javascript]  

var setting = {    

            data: {    

                simpleData: {    

Ztree是一个使用jQuery实现的JSP页面的各种功能树。                    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  
 

Ztree是一个使用jQuery实现的JSP页面的各种功能树。                asyncError: zTreeOnAsyncError,   //加载错误的fun    

                beforeClick:beforeClick //捕获单击节点之前的风浪回调函数
 

            }  

        };    

        //treeId是treeDemo  

        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;    

        }    

          

        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);    

        });    

 

ZtreeServlet

[java]  

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<ZtreeBean> list = new ArrayList<ZtreeBean>();  

        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 {  

    }  

  

}  

 

当前版本Ztree 3.5.01 simple.html [html] !DOCT…

相关文章