easyui 03 tree后台工作

实体类

package entil;

import java.util.ArrayList;
import java.util.List;

public class Module {

	
	private int id;
	private int pid;
	private String text;
	private String iconCls;
	private String url;
	private String sort;
	
	private List<Module> children = new ArrayList<Module>();

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public int getPid() {
		return pid;
	}

	public void setPid(int pid) {
		this.pid = pid;
	}

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	public String getIconCls() {
		return iconCls;
	}

	public void setIconCls(String iconCls) {
		this.iconCls = iconCls;
	}

	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}

	public String getSort() {
		return sort;
	}

	public void setSort(String sort) {
		this.sort = sort;
	}

	public List<Module> getChildren() {
		return children;
	}

	public void setChildren(List<Module> children) {
		this.children = children;
	}

	
	public Module() {
		// TODO Auto-generated constructor stub
	}
	
	public Module(int id, int pid, String text, String iconCls, String url, String sort, List<Module> children) {
		this.id = id;
		this.pid = pid;
		this.text = text;
		this.iconCls = iconCls;
		this.url = url;
		this.sort = sort;
		this.children = children;
	}

	public Module(int pid, String text, String iconCls, String url, String sort, List<Module> children) {
		this.pid = pid;
		this.text = text;
		this.iconCls = iconCls;
		this.url = url;
		this.sort = sort;
		this.children = children;
	}

	@Override
	public String toString() {
		return "Module [id=" + id + ", pid=" + pid + ", text=" + text + ", iconCls=" + iconCls + ", url=" + url
				+ ", sort=" + sort + ", children=" + children + "]";
	}

	
	
	
	
}

servlet

package Servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

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

import com.alibaba.fastjson.JSON;

import biz.IModuleDaoBiz;
import biz.ModuleDaoBiz;
import entil.Module;

/**
 * Servlet implementation class ModuleServlet
 */
@WebServlet("/ModuleServlet")
public class ModuleServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//编码方式
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf0-8");
		response.setContentType("text/html; charset=UTF-8");
		
		//servlet调用 biz biz调用dao
		IModuleDaoBiz imb = new ModuleDaoBiz();
		//获得out对象
		PrintWriter out = response.getWriter();
		//调用方法
		List<Module> ls = imb.getAllByPid(-1);
		//把集合转成json格式的字符串
		String str = JSON.toJSONString(ls);
		//把响应输送到客户端
		out.write(str);
		out.flush();
		out.close();
	}

}

dao方法：

package dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import entil.Module;
import util.DBHelper;

public class ModuleDao implements IModuleDao {

	@Override
	public List<Module> getAllByPid(int pid) {
		// TODO Auto-generated method stub
		Connection con = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		//集合
		List<Module> ls = new ArrayList<Module>();
		try {
			//连接
			con = DBHelper.getCon();
			//定义sql
			String sql = "select * from tb_module where pid=? order by";
			//执行sql语句
			ps = con.prepareStatement(sql);
			//给占位符赋值
			ps.setInt(1, pid);
			//获得结果集
			rs = ps.executeQuery();
			//便利结果集
			while(rs.next()) {
				//实例化
				Module md = new Module();
				//赋值
				md.setId(rs.getInt(1));
				md.setPid(rs.getInt(2));
				md.setText(rs.getString(3));
				md.setIconCls(rs.getString(4));
				md.setUrl(rs.getString(5));
				md.setSort(rs.getString(6));
				//加到集合中
				ls.add(md);
			}
			
			
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}finally {
			DBHelper.myClose(con, ps, rs);
		}
		
		return ls;
	}

	
		
	
}

主界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="common/head.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//alert("哈哈"+ctx);
	$(function(){
		$('#myTree').tree({    
		    url:ctx+'/ModuleServlet',//请求地址   
		    animate:true,//折叠效果
		    onClick:function(node){
		    	//alert(node.text+"  "+node.id+"  "+node.state);//在用户点击的时候提示
		   		//新打开一个选项卡tab iconCls:'icon-ok' iconCls:'icon-heart'
		    	//alert(node.iconCls);//图标
		    	//alert(node.url);
		    	//拿到对应后代节点的集合
		    	var cs = $('#MyTree').tree('getChildren',node.target);
		    	//alert(cs.length);
		    	if(cs.length==0){
		    		//没有后代节点
		    		
			   		var f = $('#MyTab').tabs('exists',node.text);
					alert(f);
					if(!f){
				   		$('#MyTab').tabs('add',{    
				    	    title:node.text, //标题   
				    	    content:'<iframe scrolling="no" frameboeder="0" width="100%" heigth="100%" src="'+node.url+'"></iframe>', //内容   
				    	    closable:true,  //是否可关闭  
				    	    iconCls:node.iconCls//图标样式
				    	    /* tools:[{    
				    	        iconCls:'icon-ok',    
				    	        handler:function(){    
				    	            alert('想干啥 干啥');    
				    	        }    
				    	    }]     */
				    	
				    	    
				    	});  
					}
					else{//说明让其对应选中
						$('#MyTab').tabs('select',node.text)
						
					}

		    	}

		    }
		});  
	})
	
	
	
	
</script>
</head>
<body class="easyui-layout">   
    <div data-options="region:'north'" style="height:80px;tetx-align:center">
    	<h1>书籍管理后台</h1>
    </div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:60px;tetx-align:center">
    	<b>&copy;该内容解释权归洛基所有</b>
    </div>   
    <div data-options="region:'west',title:'功能导航',split:true" style="width:150px;">
    	<!-- 左侧tree控件 -->
    	<ul id="tt" class="easyui-tree">   
    
		</ul>  
    	
    </div>   
    <div data-options="region:'center'" style="padding:5px;background: #fff">   
  	<!--中间的tabe控件  -->
  	<div id="MyTab" data-options="pill:true" class="easyui-tabs" style="width:100%;height:100%;">
    	<div data-options="iconCls:'icon-application-home'" title="首页" style="padding:20px;display:none;">   
			<img alt="加载失败" src="images/lb1.png" width="100%" height="100%">
   	 	</div>  
   	 	
   	 	
   	 	 
	   </div> 
    </div>   
</body>  

</html>

包含界面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
    String path= request.getContextPath();
    request.setAttribute("ctx", path);
    %>
   <script type="text/javascript">
	var ctx='${ctx}';
	alert(ctx);
</script> 
<!-- 引入easyui的CSS -->
<link type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/default/easyui.css" rel="stylesheet"/>
 <!-- 引入easyui的图标 -->
<link type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/icon.css" rel="stylesheet"/>
 <!-- 引入JQuery类库 -->
 <script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<!-- 引入easyui类库 -->
<script type="test/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<!-- 引入支持中文的语言包 -->
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>