jquery zTree异步加载简单实例

最新推荐文章于 2023-02-17 15:57:22 发布

iteye_3607

最新推荐文章于 2023-02-17 15:57:22 发布

阅读量224

点赞数

文章标签： java json javascript ViewUI

首先提供Ztree官方网站http://www.ztree.me。

Ztree是一个使用jQuery实现的JSP页面的各种功能树，本文介绍一个异步获取数据到下拉树的实现方式。

当前版本Ztree 3.5.01

simple.html

<!DOCTYPE html>
<html>
  <head>
    <title>simple.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <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>
    <div class="zTreeDemoBackground left"><ul id="treeDemo" class="ztree"></ul></div>
  </body>
</html>

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

得到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<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 {
	}

}

iteye_3607

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery zTree异步加载简单实例

首先提供Ztree官方网站http://www.ztree.me。Ztree是一个使用jQuery实现的JSP页面的各种功能树，本文介绍一个异步获取数据到下拉树的实现方式。当前版本Ztree 3.5.01simple.html&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;...
复制链接

扫一扫