Easyui02,03

目录

搭建树形界面

1.项目结构

2.需要开发工具eclipse和jar包

3实现树形界面代码

---

搭建树形界面

1.项目结构

 

2.需要开发工具eclipse和jar包

 

3实现树形界面代码

3.1数据库表和数据代码

CREATE TABLE t_module  (
  id integer DEFAULT NULL,
  pid integer DEFAULT NULL,
  text VARCHAR(150) DEFAULT NULL,
  icon VARCHAR(90) DEFAULT NULL,
  url VARCHAR(180) DEFAULT NULL,
  sort integer DEFAULT NULL
);

INSERT INTO t_module VALUES (20, -1, '订单管理', NULL, '', 2);
INSERT INTO t_module VALUES (2001, 20, '订单管理', NULL, '/orderList.jsp', 6);
INSERT INTO t_module VALUES (2002, 20, '订单统计', NULL, '/orderStatistics.jsp', 7);
INSERT INTO t_module VALUES (21, -1, '系统管理', NULL, '', 3);
INSERT INTO t_module VALUES (2101, 21, '用户管理', NULL, 'jsp/system/userManage.jsp', 8);
INSERT INTO t_module VALUES (2102, 21, '权限管理', NULL, 'jsp/system/authManage.jsp', 10);
INSERT INTO t_module VALUES (2103, 21, '字典管理', NULL, '/dictList.jsp', 11);
INSERT INTO t_module VALUES (22, -1, '书本管理', NULL, '', 1);
INSERT INTO t_module VALUES (2201, 22, '新增书本', NULL, 'jsp/book/addBook.jsp', 4);
INSERT INTO t_module VALUES (2202, 22, '书本管理', NULL, 'jsp/book/bookList.jsp', 5);

3.2(util)DBHelper代码

package util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import oracle.jdbc.driver.OracleDriver;

/**
 * 数据库辅助类
 * @author Administrator
 *
 */
public class DBHelper {
	
	//两个静态常量
	private static final String URL="jdbc:oracle:thin:@localhost:1521:orcl";
	private static final String CNAME="oracle.jdbc.driver.OracleDriver";
	
	
	
	//加载驱动
	static {
		try {
			Class.forName(CNAME);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	/**
	 * 创建连接
	 * @return 连接
	 */
	public static Connection getsCon() {
		Connection con=null;
		try {
			con=DriverManager.getConnection(URL, "scott", "Tiger123");
		} catch (Exception e) {
			e.printStackTrace();
		}
		return con;
	}
	
	/**
	 * 关闭资源
	 * @param con 连接
	 * @param ps 执行对象
	 * @param rs 结果集
	 */
	public static void Close(Connection con,PreparedStatement ps,ResultSet rs) {
		try {
			if(con!=null&&!con.isClosed()){
				con.close();
			}
			if(ps!=null){
				ps.close();
			}
			if(rs!=null){
				rs.close();
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	
}

3.3实体类(model)

package model;

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

public class Module {
	
	private Integer id;
	
	private Integer pid;
	
	private String text;
	
	private String icon;
	
	private String url;
	
	private int sort;
	
	private List<Module> children = new ArrayList<>();

	public Integer getId() {
		return id;
	}

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

	public Integer getPid() {
		return pid;
	}

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

	public String getText() {
		return text;
	}

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

	public String getIcon() {
		return icon;
	}

	public void setIcon(String icon) {
		this.icon = icon;
	}

	public String getUrl() {
		return url;
	}

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

	public int getSort() {
		return sort;
	}

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

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

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

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

}

3.4dao方法以及接口

package dao;

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

import model.Module;
import util.DBHelper;

public class ModuleDao implements IModuleDao {

	@Override
	public List<Module> listModel(int pid) {
		List<Module> list = new ArrayList<>();
		Connection con = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		try {
			String sql = "select id,pid,text,icon,url,sort from t_module where pid=?";
			con = DBHelper.getsCon();
			ps = con.prepareStatement(sql);
			ps.setInt(1, pid);
			rs = ps.executeQuery();
			
			while(rs.next()) {
				Module m = new Module();
				m.setId(rs.getInt("id"));
				m.setPid(rs.getInt("pid"));
				m.setText(rs.getString("text"));
				m.setUrl(rs.getString("url"));
				m.setSort(rs.getInt("sort"));
				list.add(m);
			}
			
		} catch (Exception e) {
			
		} finally {
			DBHelper.Close(con, ps, rs);
		}
		
		return list;
	}
	
	
	public static void main(String[] args) {
		ModuleDao dao = new ModuleDao();
		List<Module> list = dao.listModel(21);
		list.forEach(t->System.out.println(t));
	}

}

package dao;

import java.util.List;

import model.Module;

public interface IModuleDao {
	
	public List<Module> listModel(int pid);

}

3.5biz层(service)

package service;

import java.util.List;

import dao.IModuleDao;
import dao.ModuleDao;
import model.Module;

public class ModuleService implements IModuleService {
	
	private IModuleDao dao = new ModuleDao();

	@Override
	public List<Module> listModel(int pid) {
		
		List<Module> list = dao.listModel(pid);
		
		for(Module m: list) {
			if(m.getUrl() == null || "".equals(m.getUrl().trim())) {
				m.setChildren(listModel(m.getId()));
			}
		}
		
		return list;
	}
	
	
	public static void main(String[] args) {
		IModuleService service = new ModuleService();
		List<Module> list = service.listModel(-1);
		list.forEach(t->System.out.println(t));
	}

}

3.6servlet

package servlet;

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

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 model.Module;
import service.IModuleService;
import service.ModuleService;


@WebServlet("/moduleServlet")
public class ModuleServlet extends HttpServlet {
	
	private IModuleService service = new ModuleService();
	
	public void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		doPost(req, resp);
	}
	
	
	public void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
		
		req.setCharacterEncoding("utf-8");
		resp.setContentType("application/json; charset=utf-8");
		
		
		List<Module> list = service.listModel(-1);
		
		PrintWriter out = resp.getWriter();
		String str = JSON.toJSONString(list);
		
		out.write(str);
		out.flush();
		out.close();
	}

}

3.7界面index.jsp

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<%@ include file="common/head.jsp" %>
	<title>Insert title here</title>
	<script>
	$(function() {
		$("#funcTree").tree({
			url: ctx+"/moduleServlet",
			onDblClick:function(node) {
				$("#funTab").tabs("add", {
					title:node.text,    
				    content:'Tab Body',    
				    closable:true,    
				    tools:[{
				        iconCls:'icon-mini-refresh',    
				        handler:function(){    
				            alert('refresh');    
				        }    
				    }]
				})
			}
		});
		
	});
	</script>
</head>
<body class="easyui-layout">
		<div data-options="region:'north'" style="height:50px"></div>
		<div data-options="region:'south',split:true" style="height:50px;"></div>
		
		<div data-options="region:'west',split:true" title="West" style="width:230px;">
			<ul id="funcTree" class="easyui-tree"></ul>
		</div>
		
		<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'" style="border:0px;">
			<div id="funTab" class="easyui-tabs" style="width:100%;height:100%">   
			    <div title="Tab1" style="padding:10px;display:none;">   
			        <table class="easyui-datagrid"
							data-options="url:'${ctx}/data/datagrid_data1.json',method:'get',border:true,singleSelect:true,fit:true,fitColumns:true">
						<thead>
							<tr>
								<th data-options="field:'itemid'" width="80">Item ID</th>
								<th data-options="field:'productid'" width="100">Product ID</th>
								<th data-options="field:'listprice',align:'right'" width="80">List Price</th>
								<th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
								<th data-options="field:'attr1'" width="150">Attribute</th>
								<th data-options="field:'status',align:'center'" width="40">Status</th>
							</tr>
						</thead>
					</table>  
			    </div> 
			</div>
		</div>
	
</body>
</html>