1.数据库工具类
package com.xiaoxiong.util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class ConnUtil {
//定义连接数据库参数
private static String drivers = "com.mysql.jdbc.Driver";
private static String url = "jdbc:mysql://localhost:3306/easyui";
private static String user = "root";
private static String password = "a123456";
private static Connection conn = null;
//连接数据库
public static Connection getConnection(){
try {
//加载驱动
Class.forName(drivers);
//连接数据库
conn = DriverManager.getConnection(url, user, password);
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return conn;
}
//关闭数据库
public void close(){
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
ConnUtil
package com.xiaoxiong.util;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
/**
* 执行Sql语句
* @author user
*
*/
public class DBUtil {
//声明JDBC对象
private Connection conn = null;
//预编译sql
private PreparedStatement ps = null;
//接收查询返回的结果
private ResultSet rs = null;
//初始化操作，连接数据库
public void init(){
conn = ConnUtil.getConnection();
}
/**
* 执行查询语句
* @param sql sql语句
* @param parameters 参数
* @return
*/
public ResultSet executeQuery(String sql, Object...parameters){
//连接数据库
init();
try {
//预编译sql
ps = conn.prepareStatement(sql);
System.out.println("============"+sql);
//为sql传值
for(int i=1; i<=parameters.length; i++){
ps.setObject(i, parameters[i-1]);
System.out.println("-------------->"+parameters[i-1]);
}
//执行sql返回结果集
rs = ps.executeQuery();
} catch (SQLException e) {
e.printStackTrace();
}
return rs;
}
public int executUpdate(String sql, Object...parameters){
init();
try {
ps = conn.prepareStatement(sql);
for (int i = 1; i <= parameters.length; i++) {
ps.setObject(i, parameters[i-1]);
}
return ps.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
}
return 0;
}
//关闭数据库
public void close(){
try {
if(rs!=null){
rs.close();
}
if(ps!=null){
ps.close();
}
if(conn!=null){
conn.close();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
DBUtil
2.entity类
package com.xiaoxiong.bean;
public class Dept {
private int deptno;
private String dname;
private String loc;
public Dept() {
}
public Dept(int deptno, String dname, String loc) {
super();
this.deptno = deptno;
this.dname = dname;
this.loc = loc;
}
public int getDeptno() {
return deptno;
}
public void setDeptno(int deptno) {
this.deptno = deptno;
}
public String getDname() {
return dname;
}
public void setDname(String dname) {
this.dname = dname;
}
public String getLoc() {
return loc;
}
public void setLoc(String loc) {
this.loc = loc;
}
}
Dept
package com.xiaoxiong.bean;
import java.util.Date;
public class Emp {
private int empno;
private String ename;
private String job;
private Date hiredate;
private String mgr;
private int sal;
private int comm;
private int deptno;
public Emp() {
}
public Emp(String ename, String job, Date hiredate, String mgr,
int sal, int comm, int deptno) {
this.ename = ename;
this.job = job;
this.hiredate = hiredate;
this.mgr = mgr;
this.sal = sal;
this.comm = comm;
this.deptno = deptno;
}
public int getEmpno() {
return empno;
}
public void setEmpno(int empno) {
this.empno = empno;
}
public String getEname() {
return ename;
}
public void setEname(String ename) {
this.ename = ename;
}
public String getJob() {
return job;
}
public void setJob(String job) {
this.job = job;
}
public Date getHiredate() {
return hiredate;
}
public void setHiredate(Date hiredate) {
this.hiredate = hiredate;
}
public String getMgr() {
return mgr;
}
public void setMgr(String mgr) {
this.mgr = mgr;
}
public int getSal() {
return sal;
}
public void setSal(int sal) {
this.sal = sal;
}
public int getComm() {
return comm;
}
public void setComm(int comm) {
this.comm = comm;
}
public int getDeptno() {
return deptno;
}
public void setDeptno(int deptno) {
this.deptno = deptno;
}
}
Emp
3.sql处理类
package com.xiaoxiong.dao;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.xiaoxiong.bean.Dept;
import com.xiaoxiong.bean.Emp;
import com.xiaoxiong.util.DBUtil;
public class EmpDao {
//实例化一个数据库工具对象
DBUtil db = new DBUtil();
private ResultSet rs = null;
public List getAvgSalary(){
StringBuffer sql = new StringBuffer();
sql.append("SELECT AVG(e.sal) as avgSalary,e.deptno from emp e GROUP BY e.deptno ");
List list = new ArrayList();
Map map = null;
rs = db.executeQuery(sql.toString());
System.out.println("查询部门平均薪资！");
try {
while(rs.next()){
map = new HashMap();
map.put("avgSalary", rs.getInt(1));
map.put("deptno", rs.getInt(2));
list.add(map);
System.out.println(rs.getInt(1)+":"+rs.getInt(2));
}
} catch (SQLException e) {
e.printStackTrace();
}
System.out.println(list);
return list;
}
/**
* 删除用户信息
* @param empno
* @return
*/
public int delete(int empno){
StringBuffer sql = new StringBuffer();
sql.append("delete from emp where empno = ?");
try {
return db.executUpdate(sql.toString(), empno);
} catch (Exception e) {
e.printStackTrace();
} finally{
db.close();
}
return 0;
}
/**
* 添加员工数据
* @param emp
* @return
*/
public int addEmp(Emp emp){
StringBuffer sql = new StringBuffer();
sql.append("insert into emp(ename,job,mgr,hiredate,sal,comm,deptno) ");
sql.append("values(?,?,?,?,?,?,?) ");
try {
return db.executUpdate(sql.toString(),emp.getEname()
,emp.getJob(),emp.getMgr(),emp.getHiredate(),emp.getSal()
,emp.getComm(),emp.getDeptno());
} catch (Exception e) {
e.printStackTrace();
} finally{
db.close();
}
return 0;
}
/**
* 修改员工
* @param emp
* @return
*/
public int update(Emp emp){
StringBuffer sql = new StringBuffer();
sql.append("update emp set ename=? ,job=?, mgr=?, hiredate=?, sal=?, comm=?, deptno=? ");
sql.append("where empno=?");
try {
return db.executUpdate(sql.toString(), emp.getEname(), emp.getJob(), emp.getMgr(),
emp.getHiredate(), emp.getSal(), emp.getComm(),emp.getDeptno(),emp.getEmpno());
} catch (Exception e) {
e.printStackTrace();
} finally{
db.close();
}
return 0;
}
/**
* 查询上级
* @return
*/
public List searchMgr(){
List list = new ArrayList();
StringBuffer sql = new StringBuffer();
sql.append("select empno, ename from emp where job in(?,?,?) ");
rs = db.executeQuery(sql.toString(), "MANAGER","ANALYST","PRESIDENT");
try {
while(rs.next()){
Emp emp = new Emp();
emp.setEmpno(rs.getInt("empno"));
emp.setEname(rs.getString("ename"));
list.add(emp);
}
} catch (SQLException e) {
e.printStackTrace();
} finally{
db.close();
}
return list;
}
/**
* 查询部门信息
* @return
*/
public List searchDept(){
List list = new ArrayList();
StringBuffer sql = new StringBuffer();
sql.append("select * from dept ");
rs = db.executeQuery(sql.toString());
try {
while(rs.next()){
Dept dept = new Dept();
dept.setDeptno(rs.getInt("deptno"));
dept.setDname(rs.getString("dname"));
dept.setLoc(rs.getString("loc"));
list.add(dept);
}
} catch (SQLException e) {
e.printStackTrace();
} finally{
db.close();
}
return list;
}
/**
* 查询所有数据
* @return
*/
public List getAll(){
//创建list集合存储查询结果集
List list = new ArrayList();
//编写sql逻辑，调用DBUtil的executeQuery执行
StringBuilder sql = new StringBuilder();
sql.append("select * from emp ");
rs = db.executeQuery(sql.toString());
try {
//迭代出数据，存储到list集合中
while(rs.next()){
Emp emp = new Emp();
emp.setEmpno(rs.getInt("empno"));
emp.setDeptno(rs.getInt("deptno"));
emp.setEname(rs.getString("ename"));
emp.setHiredate(rs.getDate("hiredate"));
emp.setJob(rs.getString("job"));
emp.setMgr(rs.getString("mgr"));
emp.setComm(rs.getInt("comm"));
emp.setSal(rs.getInt("sal"));
list.add(emp);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally{
db.close();
}
return list;
}
/**
* 通过员工名模糊查询
* @param page
* @param rows
* @param name
* @return
*/
public List<Emp> searchByName(int page,int rows,String name){
List<Emp> list = new ArrayList<Emp>();
StringBuffer sql = new StringBuffer();
sql.append("select * from emp where ename like ? limit ?,?");
System.out.println("输入查询的用户名为："+name);
rs = db.executeQuery(sql.toString(), "%" + name + "%", (page-1)*rows, rows);
System.out.println("模糊查询的结果为："+rs);
try {
//迭代出数据，存储到list集合中
while(rs.next()){
Emp emp = new Emp();
emp.setEmpno(rs.getInt("empno"));
emp.setDeptno(rs.getInt("deptno"));
emp.setEname(rs.getString("ename"));
emp.setHiredate(rs.getDate("hiredate"));
emp.setJob(rs.getString("job"));
emp.setMgr(rs.getString("mgr"));
emp.setComm(rs.getInt("comm"));
emp.setSal(rs.getInt("sal"));
list.add(emp);
}
}catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally{
db.close();
}
return list;
}
/**
* 分页查询
* @param page
* @param rows
* @return
*/
public List<Emp> searchPage(int page, int rows){
List<Emp> list = new ArrayList<Emp>();
System.out.println("page="+page+":rows"+rows);
StringBuilder sql = new StringBuilder();
sql.append("select * from emp limit ?,? ");
rs = db.executeQuery(sql.toString(), (page-1)*rows, rows);
try {
//迭代出数据，存储到list集合中
while(rs.next()){
Emp emp = new Emp();
emp.setEmpno(rs.getInt("empno"));
emp.setDeptno(rs.getInt("deptno"));
emp.setEname(rs.getString("ename"));
//日期格式的转换
emp.setHiredate(rs.getDate("hiredate"));
emp.setJob(rs.getString("job"));
emp.setMgr(rs.getString("mgr"));
emp.setComm(rs.getInt("comm"));
emp.setSal(rs.getInt("sal"));
list.add(emp);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally{
db.close();
}
return list;
}
/**
* 模糊匹配数据的总数
* @param name
* @return
*/
public int getCountByName(String name){
StringBuilder sql = new StringBuilder();
sql.append("select count(*) from emp where ename like ?");
int count = 0;
rs = db.executeQuery(sql.toString(), "%" + name + "%");
try {
while(rs.next()){
count = rs.getInt(1);
}
} catch (SQLException e) {
e.printStackTrace();
}
return count;
}
/**
* 查询总数
* @return
*/
public int getCount(){
StringBuilder sql = new StringBuilder();
sql.append("select count(*) from emp ");
int count = 0;
rs = db.executeQuery(sql.toString());
try {
while(rs.next()){
count = rs.getInt(1);
}
} catch (SQLException e) {
e.printStackTrace();
}
return count;
}
}
EmpDao
4.action类
package com.xiaoxiong.action;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.google.gson.Gson;
import com.opensymphony.xwork2.ActionSupport;
import com.xiaoxiong.bean.Dept;
import com.xiaoxiong.dao.EmpDao;
public class DeptAction extends ActionSupport {
EmpDao dao = new EmpDao();
/**
* 查询dept
* @return
* @throws IOException
*/
public String searchDept() throws IOException {
List<Dept> list = new ArrayList<Dept>();
Dept dept = new Dept();
dept.setDeptno(-1);
dept.setDname("请选择");
list = dao.searchDept();
// 将查询到的结果转为json数据
list.add(0, dept);
Gson gson = new Gson();
String json = gson.toJson(list);
System.out.println(json);
// 数据回传给浏览器端
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
response.getWriter().println(json);
return this.NONE;
}
}
DeptAction
package com.xiaoxiong.action;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.google.gson.Gson;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;
import com.xiaoxiong.bean.Dept;
import com.xiaoxiong.bean.Emp;
import com.xiaoxiong.dao.EmpDao;
public class EmpAction extends ActionSupport implements ModelDriven<Emp> {
private Emp emp;
private Integer rows;
private Integer page;
private String ename;
// 实例化一个dao类
EmpDao dao = new EmpDao();
public String avgSalary() throws IOException{
List list = new ArrayList();
list = dao.getAvgSalary();
System.out.println("访问avgSalaryAction");
//转换为json数据
String json = new Gson().toJson(list);
System.out.println("-------------json"+json);
ServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html; charset=utf-8");
response.getWriter().println(json);
return this.NONE;
}
/**
* 删除模块
* @return
* @throws IOException
*/
public String delete() throws IOException {
// 创建map存储执行的结果
Map map = new HashMap();
// 做异常处理
try {
// 修改员工信息
dao.delete(emp.getEmpno());
map.put("result", true);
map.put("message", "数据删除成功");
} catch (Exception e) {
map.put("result", false);
map.put("message", e.getMessage());
}
// 将数据转换为json格式
String json = new Gson().toJson(map);
ServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html; charset=utf-8");
response.getWriter().println(json);
return this.NONE;
}
/**
* 修改用户
*
* @return
* @throws IOException
*/
public String update() throws IOException {
// 创建map存储执行的结果
Map map = new HashMap();
// 做异常处理
try {
// 修改员工信息
dao.update(emp);
map.put("result", true);
map.put("message", "数据修改成功");
} catch (Exception e) {
map.put("result", false);
map.put("message", e.getMessage());
}
System.out.println("empno:" + emp.getEmpno() + "ename:"
+ emp.getEname() + "----job:" + emp.getJob() + "----deptno:"
+ emp.getDeptno() + "----mgr:" + emp.getMgr() + "----hiredate:"
+ emp.getHiredate() + "----sal:" + emp.getSal() + "----comm:"
+ emp.getComm());
String json = new Gson().toJson(map);
ServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html; charset=utf-8");
response.getWriter().println(json);
return this.NONE;
}
/**
* 新增用户
*
* @return
* @throws IOException
*/
public String save() throws IOException {
Map map = new HashMap();
// 做异常处理
try {
// 添加员工信息
dao.addEmp(emp);
map.put("result", true);
map.put("message", emp.getEname() + "保存成功");
} catch (Exception e) {
map.put("result", false);
map.put("message", e.getMessage());
}
System.out.println("ename:" + emp.getEname() + "----job:"
+ emp.getJob() + "----deptno:" + emp.getDeptno() + "----mgr:"
+ emp.getMgr() + "----hiredate:" + emp.getHiredate()
+ "----sal:" + emp.getSal() + "----comm:" + emp.getComm());
String json = new Gson().toJson(map);
ServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html; charset=utf-8");
response.getWriter().println(json);
return this.NONE;
}
/**
* 查询上级信息
*
* @return
* @throws IOException
*/
public String searchMgr() throws IOException {
List<Emp> list = new ArrayList<Emp>();
Emp emp = new Emp();
emp.setEmpno(-1);
emp.setEname("请选择");
list = dao.searchMgr();
// 将查询到的结果转为json数据
// 将请选择数据置顶
list.add(0, emp);
// 需要导入gson-2.2.4.jar包
Gson gson = new Gson();
String json = gson.toJson(list);
System.out.println("--------------" + json);
// 数据回传给浏览器端
ServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
response.getWriter().println(json);
return this.NONE;
}
/**
* 分页查询
*
* @return
* @throws IOException
*/
public String searchPage() throws IOException {
List<Emp> list = new ArrayList<Emp>();
int count = 0;
System.out.println("----------->rows:" + rows + "===page" + page
+ "==ename" + ename);
ename = emp.getEname();
if (ename == null) {
// 查询数据总条数
count = dao.getCount();
// rows = page * rows > count ? rows : ((page+1) * rows - count);
list = dao.searchPage(page, rows);
} else {
count = dao.getCountByName(ename);
list = dao.searchByName(page, rows, ename);
}
Map map = new HashMap();
// 用map结合存储总数居的条数，和list集合
map.put("total", count);
map.put("rows", list);
// 用Gson将map数据转换为json格式数据
Gson gson = new Gson();
String json = gson.toJson(map);
// 将数据发送给浏览器端
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
response.getWriter().println(json);
return this.NONE;
}
public Integer getRows() {
return rows;
}
public void setRows(Integer rows) {
this.rows = rows;
}
public Integer getPage() {
return page;
}
public void setPage(Integer page) {
this.page = page;
}
@Override
public Emp getModel() {
emp = new Emp();
return emp;
}
}
EmpAction
5.struts.xml配置文件
<?xml version="1.0" encoding="UTF-8"?>
<!-- DTD 这是一个用来描述XML文件能写什么标签不能写什么标签的规则文件 -->
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="empPak" extends="struts-default" namespace="/">
<action name="searchPage" class="com.xiaoxiong.action.EmpAction" method="searchPage"></action>
<action name="searchDept" class="com.xiaoxiong.action.DeptAction" method="searchDept"></action>
<action name="searchMgr" class="com.xiaoxiong.action.EmpAction" method="searchMgr"></action>
<action name="save" class="com.xiaoxiong.action.EmpAction" method="save"></action>
<action name="update" class="com.xiaoxiong.action.EmpAction" method="update"></action>
<action name="delete" class="com.xiaoxiong.action.EmpAction" method="delete"></action>
<action name="avgSalary" class="com.xiaoxiong.action.EmpAction" method="avgSalary"></action>
</package>
</struts>
struts.xml
6.首页index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP ‘index.jsp‘ starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- Easyui主题CSS -->
<link rel="stylesheet"
href="/easyUiProject/style/easyui/ui-pepper-grinder/easyui.css"
type="text/css"></link>
<!-- 图标CSS -->
<link rel="stylesheet" href="/easyUiProject/style/easyui/icon.css"
type="text/css"></link>
</head>
<script type="text/javascript" src="/easyUiProject/script/jquery.min.js"></script>
<script type="text/javascript"
src="/easyUiProject/script/jquery.easyui.min.js"></script>
<style>
.tab-body {
overflow: hidden;
}
</style>
<script>
var deptnos = [];
var salarys = []
$(function(){
$.ajax({
url : "/easyUiProject/avgSalary",
type : "post",
dataType : "json",
success : function(json){
console.info(json);
for(var i=0; i<json.length; i++){
console.info(json[i].deptno+":"+json[i].avgSalary);
deptnos[i] = json[i].deptno;
salarys[i] = json[i].avgSalary;
}
console.info("部门数据"+deptnos);
console.info("部门平均薪资"+salarys);
}
});
$("#treeFunctions").tree({
onClick : function(node){
//在浏览器控制台打印数据
console.info(node);
if(node.attributes==null || node.attributes.url==null){
console.info(node.text+"节点未设置url，本次操作无效");
return;
}
//判断页签是否存在，不存在则创建，存在则激活
//exists表明指定的面板是否存在，‘which‘参数可以是选项卡面板的标题或索引。
var isExists = $("#tabsMain").tabs("exists",node.text);
if(isExists==false){
//创建标题
$("#tabsMain").tabs("add",{
title : node.text, //标题
closable : true, //是否能被关闭
//content 内容
content : "<iframe src=‘"+node.attributes.url+"‘ style=‘border:0px;width:100%;height:100%‘></iframe>",
bodyCls : "tab-body"
})
}else{
//激活--->select被选中的
$("#tabsMain").tabs("select",node.text);
}
}
})
})
</script>
</head>
<body class="easyui-layout">
<div region="north" style="height: 100px">
<div style="background-color: red"></div>
</div>
<div region="west" title="系统列表" split=true style="width: 300px">
<div class="easyui-accordion" fit="true" border=false>
<div title="系统管理平台">
<ul class="easyui-tree" id="treeFunctions">
<li><span>组织机构管理</span>
<ul>
<!-- Easyui中为树的节点自定义属性使用data-options -->
<li data-options="attributes:{‘url‘ : ‘http://www.sohu.com‘}"><span>部门管理</span></li>
<li data-options="attributes:{‘url‘ : ‘http://www.163.com‘}"><span>组织机构管理</span></li>
</ul></li>
<li><span>角色管理</span>
<ul>
<li><span>员工管理</span></li>
<li data-options="attributes:{‘url‘:‘/easyUiProject/tongj.html‘}">
<span>部门薪资水平</span>
</li>
<li data-options="attributes:{‘url‘:‘/easyUiProject/emp.html‘}">
<span>角色管理</span>
</li>
</ul></li>
</ul>
</div>
<div title="借款人销售系统(BorrowSale-BS)">
<ul class="easyui-tree">
<li><span></span></li>
</ul>
</div>
</div>
</div>
<div region="center">
<div class="easyui-tabs" id="tabsMain" fit="true" border="false">
<div title="首页"></div>
</div>
</div>
</body>
</html>
index.jsp
7.管理界面emp.xml
<!DOCTYPE html>
<html>
<head>
<title>emp.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!-- Easyui主题CSS -->
<link rel="stylesheet" href="/easyUiProject/style/easyui/ui-pepper-grinder/easyui.css" type="text/css"></link>
<!-- 图标CSS -->
<link rel="stylesheet" href="/easyUiProject/style/easyui/icon.css" type="text/css"></link></head>
<script type="text/javascript" src="/easyUiProject/script/jquery.min.js"></script>
<script type="text/javascript" src="/easyUiProject/script/jquery.easyui.min.js"></script>
<!-- 国际化，页面信息置为中文 -->
<script type="text/javascript" src="/easyUiProject/script/easyui-lang-zh_CN.js"></script>
<!-- 为对话框定义样式 -->
<style>
.easyui-textbox , .easyui-datebox , .easyui-numberspinner{
width:150px
}
.easyui-combobox {
width:156px
}
</style>
<script type="text/javascript">
//扩展自定义校验
$.extend($.fn.validatebox.defaults.rules,{
ename : { //校验规则名称
validator: function(value,param){ //value代表了当前文本框输入的内容
var regex = new RegExp("^[A-Z]{1,}( [A-Z]{1,}){0,}$"); //定义正则
var result = regex.test(value);
return result;
},
message: "输入的类容必须为大写的字母"
},
mustselect : {
validator : function(value,param){
if(value == "请选择"){
return false;
}else{
return true;
}
},
message : "请选择有效选项"
}
});
//模糊查询
$(function(){
$("#btnQuery").click(function(){
$("#grdEmp").datagrid("load",{ //页面加载时向服务端发送数据
//向服务端发送ename
"ename" : $("#txtEname").val()
});
});
});
//增加员工
$(function(){//文档加载函数
$("#btnAdd").click(function(){//点击时触发函数
$("#cmbDept").combobox({ //查询部门信息
url:"/easyUiProject/searchDept",
valueField:"deptno", //基础数据值名称绑定到该下拉列表框。
textField:"dname" , //基础数据字段名称绑定到该下拉列表框。
value : -1
}),
//查询上级领导
$("#cmbMgr").combobox({
url : "/easyUiProject/searchMgr",
valueField : "empno",
textField : "ename",
value : -1
}),
$("#frmEmp").attr("opmode" , "save");
$("#dlgEmp").dialog({//创建对话框
title : "新增员工",
width : 300, //设置对话框宽度
height : 300, //设置对话框高度
modal : true, //模态对话框,不允许操作除对话框以外的东西（原理，就是添加了一个遮罩层）
buttons : "#dlgBtns" //设置底部按钮组
});
});
});
//将表单中的数据提交到服务端。
$(function(){
//取消按钮功能
$("#btnCancel").click(function(){
$("#frmEmp").form("clear");//清空表单数据
$("#cmbDept").combobox("setValue" , -1);
$("#cmbJob").combobox("setValue" , -1);
$("#cmbMgr").combobox("setValue" , -1);
$("#dlgEmp").dialog("close");
});
//保存按钮功能
$("#btnSave").click(function(){
//attr() 如果只有一个参数则是获取数据。
var opmode = $("#frmEmp").attr("opmode");
//表单提交功能
$("#frmEmp").form("submit" , {
url : "/easyUiProject/"+opmode , //数据提交的路径
success : function(text){
//将传送过来的text数据转换为json数据
var json = $.parseJSON(text);
//对服务端返回的数据进行处理
if(json.result == true){
//通知提示框
$.messager.alert("通知",json.message,"info",function(){
$("#dlgEmp").dialog("close"); //关闭对话框
$("#grdEmp").datagrid("reload");//重写加载数据
$("#frmEmp").form("clear");//清空表单数据
//初始化表单数据
$("#cmbDept").combobox("setValue" , -1);
$("#cmbJob").combobox("setValue" , -1);
$("#cmbMgr").combobox("setValue" , -1);
});
} else{
$.messager.alert("错误",json.message,"error");
}
}
});
});
});
//修改用户信息
$(function(){
//修改按钮
$("#btnEdit").click(function(){
//获取被选中的列信息
var rec = $("#grdEmp").datagrid("getSelected");
if(rec == null){
$.messager.alert("错误","请选择要修改的员工","error");
return;
}
//打印出选择列的信息,在浏览器控制台打印
console.info(rec);
//加载部门选项信息
$("#cmbDept").combobox({
url : "/easyUiProject/searchDept", //请求的路径
textField : "dname", //下拉选项的文本
valueField : "deptno", //下拉选项的value
value : -1 //设置默认选项为“请选择”
});
//加载上级选项信息
$("#cmbMgr").combobox({
url : "/easyUiProject/searchMgr",
textField : "ename",
valueField : "empno",
value : -1
});
//form组件的load方法会自动将rec对象中的属性找到对应的name组件值回填进去
$("#frmEmp").form("load", rec);
//设置opmode属性值
$("#frmEmp").attr("opmode" , "update");
$("#dlgEmp").dialog({
title : "修改员工信息",
width : 300,
height : 300,
modal : true, //模态对话框
buttons : "#dlgBtns", //设置底部按钮组
closable : false //不要出现右上角的关闭符号
});
});
});
//删除用户信息
$(function(){
$("#btndelete").click(function(){
//获取选中列的数据
var rec = $("#grdEmp").datagrid("getSelected");
//浏览器控制台输出选中的数据
console.info(rec);
if(rec == null){
$.messager.alert("错误","请选择要删除的员工列","error");
return;
}else{
$.messager.confirm("确认","是否要删除"+rec.ename+"的数据吗？", function(r){
if(r==true){//如果选择“确认”
//调用ajax传送数据给服务端
$.ajax({
url : "/easyUiProject/delete?empno="+rec.empno,
type : "post",
dataType : "json",
success : function(json){
if(json.result==true){
$.messager.alert("通知",json.message,"info",function(){
//删除完毕后，刷新列表数据
$("#grdEmp").datagrid("reload");
});
}else{
$.messager.alert("错误",json.message,"error");
}
}
});
}
});
}
});
});
</script>
</head>
<body>
<!-- toolbar="#tb":将id为tb的对象放到工具栏上
singleSelect="true"：表示只需要选择一行
striped=true：斑马纹效果
-->
<table id="grdEmp" class="easyui-datagrid" striped=true singleSelect=true
url="/easyUiProject/searchPage" fit=true title="员工信息表" toolbar="#tb" pagination=true>
<!-- 表头 -->
<thead>
<tr>
<th data-options="width:50,field:‘abc‘,checkbox:true">员工编号</th>
<th data-options="width:100,field:‘empno‘">员工编号</th>
<th data-options="width:100,field:‘deptno‘">部门编号</th>
<th data-options="width:100,field:‘ename‘">员工姓名</th>
<th data-options="width:100,field:‘job‘">职位</th>
<th data-options="width:100,field:‘mgr‘">领导编号</th>
<th data-options="width:100,field:‘hiredate‘">入职时间</th>
<th data-options="width:100,field:‘sal‘">工资</th>
<th data-options="width:100,field:‘comm‘">津贴</th>
</tr>
</thead>
<!-- 表体 -->
<tbody>
</tbody>
</table>
<!-- 工具栏列表 -->
<div id="tb">
<input id="txtEname" type="text" placeholder="请输入要查询的员工姓名" class="easyui-validatebox">
<a id="btnQuery" href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘">查询</a>
<a id="btnAdd" href="#" class="easyui-linkbutton" iconCls="icon-add">新增</a>
<a id="btnEdit" href="#" class="easyui-linkbutton" iconCls="icon-edit">修改</a>
<a id="btndelete" href="#" class="easyui-linkbutton" iconCls="icon-remove">删除</a>
</div>
<!-- 创建新增表单 -->
<div id="dlgEmp" style="padding:10px">
<form id="frmEmp" method="post" opmode=""> <!-- 添加自定义属性opmode来判断是“新增”还是“修改” -->
<!-- 表单结构 -->
<table style="width: 100%"><!-- 百分比来设置表单宽度 -->
<tr>
<td style="width: 75px">员工姓名</td>
<td>
<input name="empno" type="hidden"/><!-- 添加隐式参数，便于获取empno -->
<!--required="required" 定义为必填字段；validType属性添加表单验证 -->
<input type="text" name="ename" class="easyui-textbox" required="required" validType="ename"/>
</td>
</tr>
<tr>
<td>隶属部门</td>
<td>
<!-- editable="false"：不允许编辑 -->
<select name="deptno" id="cmbDept" class="easyui-combobox" editable="false" required="required" validType="mustselect">
<option value="-1">请选择</option>
</select>
</td>
</tr>
<tr>
<td>岗位</td>
<td>
<!-- editable="false"：不允许编辑 -->
<select id="cmbJob" name="job" class="easyui-combobox" editable="false" required="required" validType="mustselect">
<option value="-1">请选择</option>
<option value="ANALYST">分析师</option>
<option value="SALESMAN">销售</option>
<option value="CLERK">店员</option>
<option value="MANAGER">经理</option>
<option value="PRESIDENT">首席执行官</option>
</select>
</td>
</tr>
<tr>
<td>上级领导</td>
<td>
<select name="mgr" id="cmbMgr" class="easyui-combobox" editable="false" required="required" validType="mustselect">
<option value="-1">请选择</option>
</select>
</td>
</tr>
<tr>
<td>入职时间</td>
<td>
<input name="hiredate" id="dd" type="text" class="easyui-datebox" required="required" editable="false"></input>
</td>
</tr>
<tr>
<td>工资</td>
<td>
<!--min:输入的最小值 max:输入的最大值 precision=0不允许有小数点 -->
<input name="sal" class="easyui-numberspinner" min=0 precision=0 required=true/>
</td>
</tr>
<tr>
<td>津贴</td>
<td>
<!--min:输入的最小值 max:输入的最大值 value=0默认值为0 precision=0不允许有小数点 -->
<input name="comm" class="easyui-numberspinner" value=0 min=0 precision=0/>
</td>
</tr>
</table>
</form>
</div>
<!-- 保存取消按钮 -->
<div id="dlgBtns">
<!-- 按钮图片属性iconCls -->
<a id="btnSave" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
<a id="btnCancel" class="easyui-linkbutton" iconCls="icon-cancel" >取消</a>
</div>
</body>
</html>
emp.xml
8.图形统计界面
<!DOCTYPE html>
<html>
<head>
<title>tongj.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- Easyui主题CSS -->
<link rel="stylesheet"
href="/easyUiProject/style/easyui/ui-pepper-grinder/easyui.css"
type="text/css"></link>
<!-- 图标CSS -->
<link rel="stylesheet" href="/easyUiProject/style/easyui/icon.css"
type="text/css"></link>
</head>
<script type="text/javascript" src="/easyUiProject/script/jquery.min.js"></script>
<script type="text/javascript"
src="/easyUiProject/script/jquery.easyui.min.js"></script>
<!-- 导入highcharts包 -->
<script type="text/javascript"
src="/easyUiProject/script/highcharts.js"></script>
<script type="text/javascript"
src="/easyUiProject/script/exporting.js"></script>
<script>
var deptnos = [];
var salarys = [];
$(document).ready(function() {
$.ajax({
url : "/easyUiProject/avgSalary",
type : "post",
dataType : "json",
async: false, //同步操作
success : function(json) {
console.info(json);
for (var i = 0; i < json.length; i++) {
console.info(json[i].deptno + ":" + json[i].avgSalary);
deptnos[i] = json[i].deptno;
salarys[i] = json[i].avgSalary;
}
console.info("部门数据" + deptnos);
console.info("部门平均薪资" + salarys);
}
});
//配置标题
var title = {
text : ‘部门平均工资‘
};
//配置副标题
var subtitle = {
text : ‘Source: runoob.com‘
};
//配置X轴显示的内容
var xAxis = {
categories : deptnos
};
//配置Y轴显示的内容
var yAxis = {
title : {
text : ‘工资水平‘
},
plotLines : [ {
value : 0,
width : 1,
color : ‘#808080‘
} ]
};
//配置提示信息：
var tooltip = {
valueSuffix : ‘$‘
}
//配置图表向右对齐：
var legend = {
layout : ‘vertical‘,
align : ‘left‘,
verticalAlign : ‘middle‘,
borderWidth : 0
};
//配置图表要展示的数据。每个系列是个数组，每一项在图片中都会生成一条曲线。
var series = [ {
name : ‘部门平均薪资‘,
data : salarys
} ];
//创建 json 数据，配置信息
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
//配置文件
//Highcharts使用json格式来配置文件
$(‘#container‘).highcharts(json);
});
</script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
</body>
</html>
tongj
时间： 2024-10-31 17:32:00