wabacus 与 ztree 结合的实战

lgwt9829

浏览: 18066 次
性别:
来自: 武汉

最近访客更多访客>>

lp164042318

guorui0511

ak23173969

liush0412

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

前年写过一个集成ztree的帖子，当时是为了测试是否可用，树的节点是写死的。
本次基于一个小应用的需求，把ztree的集成落地与此项目。废话不多少，直接上代码。

1.准备工作还是请参照前文wabacus 集成ztree,链接为http://lgwt9829.iteye.com/blog/1834820

首先，将ztree需要的js包及css文件加载到项目中。如下图：
把这些js文件copy到WebRoot\wabacusdemo\js\下面

同样把css文件copy到WebRoot\wabacusdemo\css下面

2.jsp页面

<%@page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<HTML>  
<HEAD>  
    <TITLE> ZTREE DEMO - Standard Data </TITLE>  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    <!--引用文件 -->  
    <link rel="stylesheet" href="webresources/tree/css/demo.css" type="text/css">  
    <link rel="stylesheet" href="webresources/tree/css/zTreeStyle/zTreeStyle.css" type="text/css">  
    <script type="text/javascript" src="webresources/tree/js/jquery-1.4.4.min.js"></script>  
    <script type="text/javascript" src="webresources/tree/js/jquery.ztree.core-3.5.js"></script>  
    <SCRIPT type="text/javascript">  
        <!--  
          
        var setting = {   
            callback: {  
                /* 点击节点，执行回调函数 */  
                onClick: zTreeOnClick
            },  
            data: {  
                simpleData: {  
                    enable: true  
                    }  
                }  
           };  
		 
        $.ajax({      
            //要用post方式      
            type: "Post",      
            //方法所在页面和方法名      
            url: "/dj/wTree",
            data:null,      
            contentType: "application/json; charset=utf-8",      
            dataType: "json",      
            success: function(myreturn) {      
                //返回的数据                            
                var zNodes =myreturn;
                $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
            },      
            error: function(err) {      
                alert("错了:"+err);      
            }      
        });
		      
        /*  点击节点执行方法，主要是更改ifream中src的值 */  
        function zTreeOnClick(event, treeId, treeNode) {  
            document.getElementById('sampleframe').src='/dj/ShowReport.wx?PAGEID=view&txtid='+treeNode.id+'';  
        };  
       
        //-->  
    </SCRIPT>  
</HEAD>  
  
<BODY>  
<h1>上传材料 </h1>  
<div class="content_wrap">  
    <div class="zTreeDemoBackground left">  
        <ul id="treeDemo" class="ztree"></ul>  
    </div>  
    <div class="right">  
        <iframe id="sampleframe" name="sampleframe" width="100%" height="99%" frameborder="0" src="" style="border: 0px solid #cecece;"></iframe>  
    </div>  
</div>  
</BODY>  
</HTML>

其中使用ajax的方式异步获取节点信息。

 $.ajax({      
            //要用post方式      
            type: "Post",      
            //方法所在页面和方法名      
            url: "/dj/wTree",
            data:null,      
            contentType: "application/json; charset=utf-8",      
            dataType: "json",      
            success: function(myreturn) {      
                //返回的数据                           
                var zNodes =myreturn;
                $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
            },      
            error: function(err) {      
                alert("错了:"+err);      
            }      
        });

3.通过类来获取数据库里的数据并组装成符合ztree要求的json对象。

package com.lg.tree;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import com.mysql.jdbc.ResultSetMetaData;
import com.wabacus.config.Config;
/**
 * 思路:
 * 1.创建数据连接
 * 2.通过result获取查询结果
 * 3.通过org.json的jar包将结果转为json对象
 * */
public class wTree  extends HttpServlet implements javax.servlet.Servlet {
	public void buildTree(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
		Connection conn =Config.getInstance().getDataSource("").getConnection();
		String sql ="select id_ as id , pid as pId , lb as name from define where flag='有效'";
		PreparedStatement pstmt = null;
		String jsonStr  = null;
		response.setCharacterEncoding("UTF-8");//为response设置字符集，否则前台乱码
		PrintWriter out = response.getWriter();	
		try {
			pstmt =conn.prepareStatement(sql);
			ResultSet rs = pstmt.executeQuery();
			jsonStr = resultSetToJson(rs);
			
			out.write(jsonStr);	
		} catch (Exception e) {
			// TODO: handle exception
			System.out.println("这里失败了");
		}
		
	}
	
	//结果集转json的方法
	public String resultSetToJson(ResultSet rs) throws SQLException,JSONException{
		//定义json数组
		JSONArray ja = new JSONArray();
		
		//获取结果集信息
		ResultSetMetaData metaData = (ResultSetMetaData) rs.getMetaData();
		int count = metaData.getColumnCount();

		//遍历每条数据
		while(rs.next()){
			JSONObject jsonObj = new JSONObject();
			
			//遍历每列
			for(int i = 1; i<=count;i++){
				String label = metaData.getColumnLabel(i);
				String value = rs.getString(label);
				jsonObj.put(label, value);
			}
			ja.put(jsonObj);
		}
		return ja.toString();
	}
	/**
	 * POST方法
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		buildTree(request, response);
	}
}

本类就3个方法，一个是post，一个是链接数据库，通过把数据查出来，并组装成id ，pid ，节点名的结构。然后通过resultSetToJson方法将结果集转为json对象。

4.最后，自然要在web.xml中注册servelt了

        <servlet-mapping>
		<servlet-name>reportservlet</servlet-name>
		<url-pattern>/ShowReport.wx</url-pattern>
	</servlet-mapping>
	
	<servlet>
	<servlet-name>wTree</servlet-name>
		<servlet-class>com.lg.tree.wTree</servlet-class>		
	</servlet>

5.数据库结构图

测试数据如下：

数据库很简单，就是常见的id pid的结构