java--easyUI+struts+JSP實現簡單的增刪查改

時間 2019-11-30

標籤 java easyui+struts+jsp easyui struts jsp 實現簡單增刪欄目 Java 简体版

原文原文鏈接

1.數據庫工具類javascript

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類css

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處理類html

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類java

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配置文件node

<?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.jspmysql

<%@ 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.xmljquery

<!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.圖形統計界面ajax

<!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>