树形结构——基本原理

说明

    首先需要声明，本篇博客是实现单实体的最基本的树形结构效果，不涉及第三方组件内容。万变不离其宗，无论是通过哪种方式，其基本的思路还是一致，希望通过本篇博客的讲解，能对初次研究树形结构的朋友有所启发。后面是实现界面显示公司规模结构效果的例子。

实现

    数据库对应表结构：

    为方便程序实现，我们将区域和公司信息，统一放入公司信息表。  

    再来看V层JSP页面呈现：

<%@ page language="java" contentType="text/html; charset=GB18030"
	pageEncoding="GB18030"%>
<%@ page import="com.tgb.basetree.manager.*" %>


	
		
		
		
	
	
		

			

				

					<%=CompanyTreeReader.getInstance().getClientTreeHTMLString() %>
				
			
		
	

    CompanyTreeReader类中调用了getClientTreeHTMLString方法，实现如下：

//定义返回给客户端的HTML字符串
private StringBuffer sbTreeHTML = new StringBuffer();

/**
 * 方法入口（为递归调用提供统一的数据库连接）
 * @return 返回HTML字符串
 */
public String getClientTreeHTMLString(){
	//递归调用时使用同一连接字符串，避免多次与数据库进行连接
	Connection conn = null;
	try{
		conn = DbUtil.getConnection();
		//调用递归实现读取的方法，第二个参数设置为0，则表示从根节点读取
		readCompanyTree(conn, 0, 0);
	}catch(Exception e){
		e.printStackTrace();
	}finally{
		//关闭数据库连接
		DbUtil.close(conn);
	}
	return sbTreeHTML.toString();
}

    然后，我们从最简单的查询数据库开始实现拼接界面要显示的 HTML 树形结构页面的效果

          1.首先我们实现最简单的查询，可以显示到浏览器中即可

/**
 * 递归读取公司表的数据信息
 * 
 * 第一步： 以最简单的方式读取分销商树形结构，可以显示到浏览器中即可
 * @param conn
 * @param id
 * @param leavel  控制层次
 */
private void readCompanyTree(Connection conn, int id, int leavel)
throws SQLException{
	
	PreparedStatement pstmt = null;
	ResultSet result = null;
	
	//查询字符串
	String strSql = "Select id, pid, name, company_id, contact_tel, address, is_company, zip_code, is_leaf from t_company where pid=?";
	try{
		pstmt = conn.prepareStatement(strSql);
		
		//查询语句参数赋值
		pstmt.setInt(1, id);
		result = pstmt.executeQuery();
		
		//遍历查询结果集
		while(result.next()){
			//拼接HTML字符串
			sbTreeHTML.append(result.getString("name"));
			sbTreeHTML.append("
\n");
			
			//不是叶子节点，递归调用执行
			if("N".equals(result.getString("is_leaf"))){
				readCompanyTree(conn,Integer.parseInt(result.getString("id")),leavel);
			}
		}
	}finally{
		//执行结束关闭资源
		DbUtil.close(result);
		DbUtil.close(pstmt);
	}
}

    界面显示效果：
          2.实现 分层显示效果

/**
 * 递归读取公司表的数据信息
 * 
 * 第二步： 加入层次感，并在叶子节点前加“-”号，非叶子节点前加“+”
 * @param conn 数据库连接字符串
 * @param id 根据pid查询的关键字值
 * @param leavel  控制层次
 */
private void readCompanyTree(Connection conn, int id, int level)
throws SQLException{
	
	PreparedStatement pstmt = null;
	ResultSet result = null;
	
	//查询字符串
	String strSql = "Select id, pid, name, company_id, contact_tel, address, is_company, zip_code, is_leaf from t_company where pid=?";
	try{
		pstmt = conn.prepareStatement(strSql);
		
		//查询语句参数赋值
		pstmt.setInt(1, id);
		result = pstmt.executeQuery();
		//遍历查询结果集
		while(result.next()){
			//获取level值，得出空格个数
			for(int i=0; i < level; i++){
				sbTreeHTML.append("  ");
			}
			
			if("N".equals(result.getString("is_leaf"))){
				sbTreeHTML.append("+")
					.append(result.getString("name"))
					.append("
\n");
				//不是叶子节点，递归调用执行，level层次参数同步递增
				readCompanyTree(conn,result.getInt("id"),level+1);
			}else{
				sbTreeHTML.append("-")
					.append(result.getString("name"))
					.append("
\n");
			}
		}
	}finally{
		//执行结束关闭资源
		DbUtil.close(result);
		DbUtil.close(pstmt);
	}
}

    界面显示：

        3.JS控制显示隐藏节点效果

    再开始继续完善之前，我们首先看不存在数据交换的树形结构的纯HTML方式

	
		

	
	
	
		

			

				

					

						
						
						所有分销商
						

							

								
								
								
								华北区
								

									

										
										
										
										
										北京市
										

											

												
												
												
												
												
												北京总公司
											
										
									
								
							
							

								
								
								
								东北区
							
							

								
								
								
								华南区
							
						
					
				
			
		
	

    根据上面的模版，我们就可以在后台继续拼成我们最终的 HTML 代码：

/**
 * 递归读取公司信息树
 * 
 * 第三步：	采用DIV生成树形结构
 * @param conn
 * @param id
 * @param leavel  控制层次
 */
private void readCompanyTree(Connection conn, int id, int level)
throws SQLException{
	PreparedStatement pstmt = null;
	ResultSet result = null;
	String strSql = "Select id, pid, name, company_id, contact_tel, address, is_company, zip_code, is_leaf from t_company where pid=?";
	try{
		pstmt = conn.prepareStatement(strSql);
		pstmt.setInt(1, id);
		result = pstmt.executeQuery();
		while(result.next()){
			sbTreeHTML.append("
")
				.append("\n");
			for(int i=0; i < level; i++){
				sbTreeHTML.append("")
					.append("\n");
			}
			//if("N".equals(result.getString("is_leaf"))){
			if("N".equals(result.getString("is_leaf"))){
				//拼接字符串过程，对应上面HTML模版中的内容，可进行简要粘贴、简要修改
				sbTreeHTML.append("")
					.append("\n")
					.append("")
					.append("\n")
					.append("" + result.getString("name") + "")
					.append("\n")
					.append("
");
				readCompanyTree(conn,result.getInt("id"),level+1);
				sbTreeHTML.append("
");
			}else{
				sbTreeHTML.append("")
					.append("\n")
					.append("")
					.append("\n");
					if("N".equals(result.getString("is_company"))){
						sbTreeHTML.append(""+ result.getString("name") +"");
					}else{
						sbTreeHTML.append(""+ result.getString("name") +"");
					}
			}
			sbTreeHTML.append("
");
		}
	}finally{
		DbUtil.close(result);
		DbUtil.close(pstmt);
	}
}

    最后实现效果：

总结

    最后形成的树形结构，是通过对JS代码控制div显示/隐藏的简单应用实现的，整个实现过程的关键点在于：方法的递归调用，后台拼接HTML代码串以及JS的灵活使用。

    在实际项目中，我们大部分是通过第三方工具来实现树形结构，例如ZTree等，在明白基本原理的层面再去应用，相信会更加清楚明了一些。本篇博客仅仅是从最最基本的实现方式入手，简单阐述并实现树形结构的实例。其中还有很多不足住处，例如多实体的级联操作，冗余字段的影响等内容，在此也仅仅是个入门学习而已。

    树形结构作为一项系统中经常用到的一项技术，我们不仅仅需要进行读取、界面显示的效果，对其中节点的CRUD操作更是常见，写至此时，也联想到了设计模式中的组合模式，正是灵活应对树形节点增删改的好方法，后面将会进行更进一步的探讨。