使用Servlet、EasyUI實現數據表格的增刪改查實例

Java後端

Bean類

public class BaseBean {
    private int page;
    private int rows;
    private int from;

    public int getPage() {
        return page;
    }

    public void setPage(int page) {
        this.page = page;
    }

    public int getRows() {
        return rows;
    }

    public void setRows(int rows) {
        this.rows = rows;
    }

    public int getFrom() {
        return from;
    }

    public void setFrom(int from) {
        this.from = from;
    }
}

public class Emp extends BaseBean{
    private int empno;
    private String ename;
    private String job;
    private int mgr;
    private String hiredate;
    private double sal;
    private double comm;
    private int deptno;
    private String password;

    private String mgrname;
    private String deptname;

    public String getMgrname() {
        return mgrname;
    }

    public void setMgrname(String mgrname) {
        this.mgrname = mgrname;
    }

    public String getDeptname() {
        return deptname;
    }

    public void setDeptname(String deptname) {
        this.deptname = deptname;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "Emp{" +
                "empno=" + empno +
                ", ename='" + ename + '\'' +
                ", password='" + password + '\'' +
                ", job='" + job + '\'' +
                ", mgr=" + mgr +
                ", hiredate='" + hiredate + '\'' +
                ", sal=" + sal +
                ", comm=" + comm +
                ", 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 int getMgr() {
        return mgr;
    }

    public void setMgr(int mgr) {
        this.mgr = mgr;
    }

    public String getHiredate() {
        return hiredate;
    }

    public void setHiredate(String hiredate) {
        this.hiredate = hiredate;
    }

    public double getSal() {
        return sal;
    }

    public void setSal(double sal) {
        this.sal = sal;
    }

    public double getComm() {
        return comm;
    }

    public void setComm(double comm) {
        this.comm = comm;
    }

    public int getDeptno() {
        return deptno;
    }

    public void setDeptno(int deptno) {
        this.deptno = deptno;
    }
}

public class GridBean<T> {
    private int total;
    private List<T> rows;
    public GridBean(){}
    public GridBean(int total, List<T> rows) {
        this.total = total;
        this.rows = rows;
    }

    public int getTotal() {
        return total;
    }

    public void setTotal(int total) {
        this.total = total;
    }

    public List<T> getRows() {
        return rows;
    }

    public void setRows(List<T> rows) {
        this.rows = rows;
    }
}

Dao層

public class EmpDao implements IEmpDao{
    @Override
    public void insert(Emp emp) {
        QueryRunner qr = new QueryRunner();
        String sql ="INSERT INTO emp (empno,ename,password,job) values(?,?,?,?)";
        Object[] param = {flag,emp.getEname(),emp.getPassword(),emp.getJob()};
        flag++;
        try {
            qr.update(DruidUtil.getConn(),sql,param);
        } catch (SQLException e) {
            e.printStackTrace();
        }

    }

    @Override
    public List<Emp> findAllEmp() {
        QueryRunner qr = new QueryRunner();
        String sql= "select * from emp";
        List<Emp> list = new ArrayList<>();
        try {
            list = qr.query(DruidUtil.getConn(),sql, new BeanListHandler<>(Emp.class));
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return list;
    }

    @Override
    public List<Emp> findEmpByCondition(Emp bean) {
        QueryRunner qr = new QueryRunner();
        String sql= "select e.*,mg.ENAME mgrname,d.DNAME deptname  from emp  e ";
        sql+=" left join emp mg on e.MGR = mg.EMPNO ";
        sql+=" LEFT JOIN dept d on e.DEPTNO = d.DEPTNO ";
        sql+=" where 1=1 ";
        List<Object> param = new ArrayList<>();
        if(bean.getEname()!=null && !bean.getEname().equals("")){
            param.add(bean.getEname());
            sql+=" and e.ename like concat('%',?,'%') ";
        }
        if(bean.getJob()!=null && !bean.getJob().equals("")){
            param.add(bean.getJob());
            sql+=" and e.job like concat('%',?,'%') ";
        }
        sql+="limit ?,?";
        param.add(bean.getFrom());
        param.add(bean.getRows());
        Object[] arr = param.toArray();
        List<Emp> list = new ArrayList<>();
        System.out.println(sql);
        System.out.println("param==>"+param);
        try {
            list = qr.query(DruidUtil.getConn(),sql, new BeanListHandler<>(Emp.class),arr);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return list;
    }

    @Override
    public int findCountByCondition(Emp bean) {
        QueryRunner qr = new QueryRunner();
        String sql= "select count(0) from emp where 1=1 ";
        List<Object> param = new ArrayList<>();
        if(bean.getEname()!=null && !bean.getEname().equals("")){
            param.add(bean.getEname());
            sql+=" and ename like concat('%',?,'%') ";
        }
        if(bean.getJob()!=null && !bean.getJob().equals("")){
            param.add(bean.getJob());
            sql+=" and job like concat('%',?,'%') ";
        }
        System.out.println(sql);
        System.out.println("param==>"+param);
        Object[] arr = param.toArray();
        int a = 0;
        try {
            a = Integer.parseInt(qr.query(DruidUtil.getConn(),sql, new ScalarHandler<>(),arr).toString());
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return a;
    }

    @Override
    public Emp findEmpByID(int empno) {
        QueryRunner qr = new QueryRunner();
        String sql= "select * from emp where empno =?";
        Emp emp = new Emp();
        try {
            emp = qr.query(DruidUtil.getConn(),sql, new BeanHandler<>(Emp.class),empno);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return emp;
    }

    @Override
    public void updateEmp(Emp bean) {
        QueryRunner qr = new QueryRunner();
        String sql="UPDATE emp SET ENAME=?,JOB=?,MGR=?,HIREDATE=?,SAL=?,COMM=?,DEPTNO=?,PASSWORD=? WHERE EMPNO=?";
        Object[] param = {bean.getEname(),bean.getJob(),bean.getMgr(),bean.getHiredate(),
        bean.getSal(),bean.getComm(),bean.getDeptno(),bean.getPassword(),bean.getEmpno()};
        try {
            qr.update(DruidUtil.getConn(),sql,param);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

    @Override
    public void insertEmp(Emp bean) {
        QueryRunner qr = new QueryRunner();
        String sql="insert INTO emp VALUES(?,?,?,?,?,?,?,?,?)";
        Object[] param = {bean.getEmpno(),bean.getEname(),bean.getJob(),bean.getMgr(),bean.getHiredate(),
                bean.getSal(),bean.getComm(),bean.getDeptno(),bean.getPassword()};
        try {
            qr.update(DruidUtil.getConn(),sql,param);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

    @Override
    public int selectMaxEmpno() {
        QueryRunner qr = new QueryRunner();
        String sql= "select max(empno) from emp";
        int max = 0;
        try {
            max = Integer.parseInt(qr.query(DruidUtil.getConn(),sql, new ScalarHandler<>()).toString());
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return max;
    }
    
    @Override
    public void deleteEmp(String empno) {
        QueryRunner qr = new QueryRunner();
        String sql= "delete from emp where empno =?";
        try {
            qr.update(DruidUtil.getConn(),sql,empno);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

Service層

public class EmpService implements IEmpService{
    private IEmpDao dao = new EmpDao();
    private IDeptDao deptdao = new DeptDao();

    @Override
    public List<Emp> findAllEmp() {
        IEmpDao dao = new EmpDao();
        return dao.findAllEmp();
    }

    @Override
    public List<Emp> findEmpByCondition(Emp bean) {
        //設置limit的2個參數 第一個參數from需要計算 第二個參數就是rows
        int from = (bean.getPage()-1)*bean.getRows();
        bean.setFrom(from);
        List<Emp> list = dao.findEmpByCondition(bean);
        return list;
    }

    @Override
    public int findCountByCondition(Emp bean) {
        return dao.findCountByCondition(bean);
    }

    @Override
    public Emp findEmpByID(int empno) {
        return dao.findEmpByID(empno);
    }

    @Override
    public void addAndModEmp(Emp bean) {
        Connection conn = DruidUtil.getConn();
        try{
            conn.setAutoCommit(false);
            //代表修改
            if(bean.getEmpno()!=0){
                dao.updateEmp(bean);
            //增加
            }else{
                //查詢出最大的empno
                int max = dao.selectMaxEmpno();
                bean.setEmpno(max+1);
                dao.insertEmp(bean);
            }
            DbUtils.commitAndCloseQuietly(conn);
        }catch (Exception e){
            e.printStackTrace();
            DbUtils.rollbackAndCloseQuietly(conn);
        }
    }

    @Override
    public List<Dept> findAllDept() {
        return deptdao.findAllDept();
    }
    
    @Override
    public void deleteEmp(String empno) {
        Connection conn = DruidUtil.getConn();
        try{
            conn.setAutoCommit(false);
            dao.deleteEmp(empno);
            DbUtils.commitAndCloseQuietly(conn);
        }catch (Exception e){
            e.printStackTrace();
            DbUtils.rollbackAndCloseQuietly(conn);
        }
    }
}

Servlet

@WebServlet(name = "EmpServlet",urlPatterns = "/EmpServlet")
public class EmpServlet extends HttpServlet {
    private IEmpService service = new EmpService();
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String method = request.getParameter("method");
        //增加登錄功能驗證 TODO

        Class c = EmpServlet.class;
        try {
            //反射獲取我們即將要調用的方法
            Method m = c.getMethod(method,HttpServletRequest.class,HttpServletResponse.class);
            m.invoke(this,request,response);
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
    }

    //根據條件查詢emp
    //一般網頁分頁插件有如下特點
    //1.前臺設置了分頁會傳遞2個參數到後臺 第一個參數是第幾頁 第二個參數是每頁顯示多少條
    //2.後臺往前臺傳遞數據的時候需要設置2種數據 第一種是當前頁面的數據 第二種是總數量
    public void getEmpByCondition(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //分頁傳遞過來的參數
//        String page = request.getParameter("page");
//        String pageSize = request.getParameter("rows");
//        System.out.println(page + "  " + pageSize);
//        //組裝查詢參數
//        Emp bean = new Emp();
//        if(pageSize!=null && !pageSize.equals("")){
//            bean.setPage(Integer.parseInt(page));
//            bean.setRows(Integer.parseInt(pageSize));
//        }
        //獲取前臺傳遞的參數 包含分頁參數  page rows
        Emp bean = new Emp();
        try {
            BeanUtils.populate(bean,request.getParameterMap());
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        System.out.println(bean);
        System.out.println(bean.getPage()+"  "+bean.getRows());
        //獲取當前頁面的數據
        List<Emp> list = service.findEmpByCondition(bean);
        //總數量
        int total = service.findCountByCondition(bean);
        //封裝成頁面需要的數據結構
        //Map<String,Object> map = new HashMap<>();
        //map.put("total",total);
        //map.put("rows", list);
        GridBean<Emp> g = new GridBean<>(total,list);
        response.getWriter().print(JsonUtil.getJsonString4JavaPOJO(g));
    }

    //進去emp列表
    public void gotoEmpList(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.getRequestDispatcher("WEB-INF/jsp/emplist.jsp").forward(request,response);
    }
    //進入增加和修改emp頁面
    public void gotoAddAndModEmp(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String empno = request.getParameter("empno");
        //如果傳遞了empno那就是修改頁面
        //如果是空的那就是增加頁面
        if(empno!=null && !empno.equals("")){
            Emp emp = service.findEmpByID(Integer.parseInt(empno));
            request.setAttribute("empS", emp);
        }
        request.getRequestDispatcher("WEB-INF/jsp/empadd.jsp").forward(request,response);
    }

    //增加或者修改emp
    public void addAndModEmp(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Emp bean = new Emp();
        try {
            BeanUtils.populate(bean,request.getParameterMap());
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        service.addAndModEmp(bean);
        //request.getRequestDispatcher("WEB-INF/jsp/emplist.jsp").forward(request,response);
    }

    //獲取所有的部門 ajax
    public void findAllDept(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List<Dept> list = service.findAllDept();
        response.getWriter().print(JsonUtil.getJsonString4JavaList(list));
    }

    //驗證用戶名是否重複
    public void vaUserNameSingle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String ename = request.getParameter("ename");
        List<Emp> list = new ArrayList<>();
        if(ename!=null &&!ename.equals("")){
            list = service.findEmpByEname(ename);
        }
        response.getWriter().print(JsonUtil.getJsonString4JavaList(list));
    }

    //刪除單個員工
    public void deleteEmp(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String empno = request.getParameter("empno");
        if(empno!=null && !empno.equals("")){
            service.deleteEmp(empno);
        }
    }
    //批量刪除員工
    public void deleteEmpList(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String idList = request.getParameter("idList");
        if(idList!=null){
            String[] idArr = idList.split(",");
            for(String s :idArr){
                service.deleteEmp(s);
            }
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

JSP頁面

先將EasyUI庫放在js文件夾中，再進行引入
EmpList.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    //得到項目的根目錄
    String path = request.getContextPath();
    pageContext.setAttribute("path", path, pageContext.PAGE_SCOPE);
%>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="${path}/js/jquery-easyui-1.7.0/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${path}/js/jquery-easyui-1.7.0/themes/icon.css">
    <script type="text/javascript" src="${path}/js/jquery-easyui-1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="${path}/js/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>

    <style type="text/css">
        .box{
            width: 1000px;
            height: 40px;
            line-height: 40px;
            padding: 5px;
            margin: 10px auto;
            font-size: 16px;
        }
        .box input{
            width: 120px;
            height: 30px;
            line-height: 40px;
        }
        .ctx{
            width: 1000px;
            margin: 0 auto;
        }
        .spanCik{
            cursor: pointer;
            color: red;

        }

    </style>
    <script language="JavaScript">
        $(function(){
            setTable();
            $("#btn").click(function(){
                $('#dg').datagrid('load',{
                    "ename":$("#ename").val(),
                    "job":$("#job").val()
                });
            });

            $("#btnadd").click(function(){
                $("#p").window('open');
                $("#updateFrame").attr("src","${path}/EmpServlet?method=gotoAddAndModEmp");
            });

            $("#btnDelAll").click(function(){
                //批量刪除
                var pages = $("#dg").datagrid("getSelections");
                if(pages.length>0){
                    console.log(pages);
                    $.messager.confirm('確認','您確認想要刪除這'+pages.length+'記錄嗎？',function(r){
                        if (r){
                            var idList = "";
                            for(var i in pages){
                                idList+=pages[i].empno+",";
                            }
                            idList = idList.substr(0,idList.length-1);
                            //加上刪除代碼
                            console.log(idList);
                            $.ajax({
                                method:"post",
                                url:"${path}/EmpServlet?method=deleteEmpList",
                                data:{"idList":idList},
                                success:function(data){
                                    $('#dg').datagrid('load');
                                }
                            });
                        }
                    });
                }else{
                    $.messager.alert('請選擇你要刪除的記錄');
                }


            });

            //$("#p").window('close');
            $("#p").window('close');
        });

        //生成easyui的表格
        function setTable(){
            $('#dg').datagrid({
                url:'${path}/EmpServlet?method=getEmpByCondition',
                fitColumns:true,
                width:1000,
                method:"post",
                nowrap:true,
                loadMsg:"正在請求服務器...",
                rownumbers:true,
                singleSelect:false,
                checkOnSelect:true,
                //打開分頁
                pagination:true,
                pageNumber:1,
                pageSize:20,
                pageList:[5,10,15,20],
                columns:[[
                    {field:'empno',title:'員工編號',width:100,checkbox:true},
                    {field:'ename',title:'員工姓名',width:100},
                    {field:'job',title:'職位',width:100},
                    {field:'mgrname',title:'經理',width:100},
                    {field:'hiredate',title:'入職時間',width:100},
                    {field:'sal',title:'工資',width:100,formatter:function(value,row,index){
                            //value 代表我這列的數據
                            //row 代表所有列的數據 js對象
                            //index 代表我當前數據的是第幾行
                            //顯示登記
                            var dengji  ="";
                            if(value!=null && value!=""){
                                if(value<=1000){
                                    dengji = "color:blue;";
                                }else if(value<3000 && value>1000){
                                    dengji  = "";
                                }else{
                                    dengji = "color:red;";
                                }
                            }
                            return '<span style="'+dengji+'">'+row.ename+':'+value+'</span>';
                    }},
                    {field:'comm',title:'獎金',width:100,align:'left'},
                    {field:'deptname',title:'部門',width:100},
                    {field:'password',title:'密碼',width:100},
                    {field:'id',title:'操作',formatter:function(value,row,index){
                        //row.empno當前員工的編號
                        var html = '<span onclick="updateEmp('+row.empno+')" class="spanCik">修改</span>&nbsp;&nbsp;<span class="spanCik" onclick="deleteEmp('+row.empno+')">刪除</span>';
                        return html;
                    }}
                ]]
            });
        }

        function updateEmp(empno){
            //open("${path}/EmpServlet?method=gotoAddAndModEmp&empno="+empno);

            $("#p").window('open');
            $("#updateFrame").attr("src","${path}/EmpServlet?method=gotoAddAndModEmp&empno="+empno);
        }
        function deleteEmp(empno){
            $.messager.confirm('確認','您確認想要刪除記錄嗎？',function(r){
                if (r){
                   //加上刪除代碼
                   $.ajax({
                       method:"post",
                       url:"${path}/EmpServlet?method=deleteEmp",
                       data:{"empno":empno},
                       success:function(data){
                           $('#dg').datagrid('load');
                       }
                   });
                }
            });
        }
        //子頁面調用
        function loadTable(){
            $('#dg').datagrid('load');
            $("#p").window('close');
        }
    </script>
</head>
<body>
    <div class="box">
        員工名稱: &nbsp;&nbsp;<input type="text" id="ename">&nbsp;&nbsp;
        職位: &nbsp;&nbsp;<input type="text" id="job">&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查詢</a>
        &nbsp;&nbsp;&nbsp;<a id="btnadd" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">增加</a>
        <a id="btnDelAll" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">批量刪除</a>
    </div>
    <div class="ctx">
        <table id="dg"></table>
    </div>

    <div id="p" class="easyui-window" style="width:700px;height:600px" >
        <iframe id="updateFrame" href="#" frameborder="0" style="width:100%;height:550px">
        </iframe>
    </div>

</body>
</html>

EmpAdd.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    //得到項目的根目錄
    String path = request.getContextPath();
    pageContext.setAttribute("path", path, pageContext.PAGE_SCOPE);
%>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="${path}/css/page.css" />
    <link rel="stylesheet" type="text/css" href="${path}/js/jquery-easyui-1.7.0/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${path}/js/jquery-easyui-1.7.0/themes/icon.css">
    <script type="text/javascript" src="${path}/js/jquery-easyui-1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="${path}/js/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
    <%--驗證--%>
    <script src="${path}/js/jquery.validate.js" type="text/javascript"></script>

<style type="text/css">
    .need_span{
        color: red;
        display: none;
    }
    .need_0, .validation_span{
        color: red;
    }
    .need_1{
        color: #666666;
    }
    .input_0{
        width: 220px;
    }
    .form_table td{
        padding: 5px;
    }
    .text_ad_0{
        font-weight: bold;
        color: #444444;
        white-space: nowrap;
    }
</style>
<script language="JavaScript">
    $.fn.datebox.defaults.formatter = function(date){
        var y = date.getFullYear();
        var m = date.getMonth()+1;
        var d = date.getDate();
        return y+'-'+m+'-'+d;
    }


    //重寫頁面提示規則字符串
    jQuery.extend(jQuery.validator.messages, {
        required: "必選字段",
        remote: "請修正該字段",
        email: "請輸入正確格式的電子郵件",
        url: "請輸入合法的網址",
        date: "請輸入合法的日期",
        dateISO: "請輸入合法的日期 (ISO).",
        number: "請輸入合法的數字",
        digits: "只能輸入整數",
        creditcard: "請輸入合法的信用卡號",
        equalTo: "請再次輸入相同的值",
        accept: "請輸入擁有合法後綴名的字符串",
        maxlength: jQuery.validator.format("請輸入一個長度最多是 {0} 的字符串"),
        minlength: jQuery.validator.format("請輸入一個長度最少是 {0} 的字符串"),
        rangelength: jQuery.validator.format("請輸入一個長度介於 {0} 和 {1} 之間的字符串"),
        range: jQuery.validator.format("請輸入一個介於 {0} 和 {1} 之間的值"),
        max: jQuery.validator.format("請輸入一個最大爲 {0} 的值"),
        min: jQuery.validator.format("請輸入一個最小爲 {0} 的值")
    });

    //驗證id只包含數字字母
    $.validator.addMethod(
        "onlyEn",
        function (value, element, param){
            var testS = /^[\w]+$/;
            return this.optional(element) || (testS.test(value));
        },
        "只能是字母,數字，下劃線，漢字"
    );



    $(function(){
        $("#backBtu").click(function(){
            parent.loadTable();
        });

        $("#hiredate").datebox({
        });
        //生成頁面的部門下拉框
        $.ajax({
            url:"${path}/EmpServlet?method=findAllDept",
            dataType:"json",
            method:"post",
            success:function(data){
                $("#deptno").combobox({
                    data:data,
                    valueField:'deptno',
                    textField:'dname'
                });
                //console.log("${empS.deptno}");
                $('#deptno').combobox('setValue', '${empS.deptno}');
            }
        });
        //設置表單的驗證
        setFormVa();
    });

    function setFormVa(){
        //開始驗證
        $("#myForm").validate({
            debug:true,
            /**//* 設置驗證規則 */
            //鍵是表單的name屬性
            //值是這個表單對象的驗證規則
            rules: {
                password: {
                    required:true,
                    rangelength:[6, 10]
                },
                ename:{
                    required:true,
                    rangelength:[5,10],
                    /*onlyEn:true*/
                    /*
                    * remote用法和ajax一模一樣
                    * */
                    remote:{
                        url:"${path}/EmpServlet?method=vaUserNameSingle",
                        type:"post",
                        dataType:"json",
                        data:{ename:function(){
                                return $.trim($("#ename").val());
                            }},
                        dataFilter: function(data, type) {
                            //js的轉json方法
                            var obj = JSON.parse(data);

                            //第一種 如果沒有查詢到
                            if(obj==null || obj.length==0){
                                return true;
                            //第二種 我查詢到了
                            }else{
                                //第一種我查詢到的人不是我當前修改的人 不通過
                                var empno = $("#empno").val();
                                if(obj[0].empno !=empno){
                                    return false;
                                //第二種我查詢到的人就是我當前修改的人 通過
                                }else{
                                    return true;
                                }

                            }
                        }
                    }
                },
                hiredate:{
                    required:true
                }
            },
            /**//* 設置錯誤提示信息 */
            messages: {
                password: {
                    required:"密碼不能爲空",
                    rangelength:"密碼只在6到10個字符之間",
                },
                ename:{
                    required:"用戶名不能爲空",
                    rangelength:"用戶名只能在5到10個字符",
                    /*onlyEn:"只能是字母,數字，下劃線，漢字"*/
                    remote:"用戶名不能重複"
                },
                hiredate:{
                    required:"入職時間不能爲空"
                }
            },
            /**//* 設置驗證觸發事件 */
            onsubmit:true,
            /**//* 設置錯誤信息提示DOM */
            errorPlacement: function(error, element) {
                $(element[0]).next().text(error.html()).show();
            },
            //當驗證成功之後 處理錯誤信息
            success:function(error, element){
                $(element[0]).next().text("");
            },
            //全部驗證通過之後會進入這個方法
            submitHandler: function (form){
                //alert("sunmit");
                //表單提交
                //form.submit();
                //ajax提交表單
                //收集表單的數據
                var formdata = $("#myForm").serialize();
                console.log(formdata);
                $.ajax({
                    method:"post",
                    url:"${path}/EmpServlet",
                    data:formdata,
                    success:function(data){
                        //調用父頁面的刷新方法
                        parent.loadTable();
                    }
                });

            }
        });
    }

</script>

</head>
<body>
<div id="adListDiv" style="" align="left">
    <div class="top_page_name">增加員工</div>

    <div class="top_page_name_bottom" style="margin:0px 5px 0px 5px;background-color:#E5E9EA;height:1px;">				     </div>

    <form id="myForm" action="${path}/EmpServlet" method="post">
        <%--控制後臺進入增加或者修改的方法--%>
        <input type="hidden" name="method" value="addAndModEmp"/>
        <input id="empno" type="hidden" name="empno" value="${empS.empno}"/>
        <table class="form_table" style="border-collapse: collapse;margin-left:80px;margin-top:10px;">
            <tr>
                <td align="right" >
                    <span class="need_0">*</span>
                    <span class="text_ad_0">密碼：</span>
                </td>
                <td>
                    <input id="password" type="password" name="password" class="input_0" value="${empS.password}"/>
                    <span class="validation_span"></span>
                </td>
            </tr>
            <tr>
                <td align="right" >
                    <span class="need_0">*</span>
                    <span class="text_ad_0">姓名：</span>
                </td>
                <td>
                    <input id="ename" type="text" name="ename" class="input_0" value="${empS.ename}"/>
                    <span class="validation_span"></span>
                </td>
            </tr>
            <tr>
                <td align="right" >
                    <span class="need_0"></span>
                    <span class="text_ad_0">工作：</span>
                </td>
                <td>
                    <input id="job" type="text" name="job" class="input_0" value="${empS.job}"/>
                    <span class="validation_span"></span>
                </td>
            </tr>
            <tr>
                <td align="right" >
                    <span class="need_0"></span>
                    <span class="text_ad_0">經理：</span>
                </td>
                <td>
                    <input id="mgr" type="text" name="mgr" class="input_0" value="${empS.mgr}"/>
                    <span class="validation_span"></span>
                </td>
            </tr>
            <tr>
                <td align="right" >
                    <span class="need_0"></span>
                    <span class="text_ad_0">入職時間：</span>
                </td>
                <td>
                    <input id="hiredate" type="text" name="hiredate" class="input_0" value="${empS.hiredate}"/>
                    <span class="validation_span"></span>
                </td>
            </tr>
            <tr>
                <td align="right" >
                    <span class="need_0"></span>
                    <span class="text_ad_0">工資：</span>
                </td>
                <td>
                    <input id="sal" type="number" name="sal" class="input_0" value="${empS.sal}"/>
                    <span class="validation_span"></span>
                </td>
            </tr>
            <tr>
                <td align="right" >
                    <span class="need_0"></span>
                    <span class="text_ad_0">獎金：</span>
                </td>
                <td>
                    <input id="comm" type="number" name="comm" class="input_0" value="${empS.comm}"/>
                    <span class="validation_span"></span>
                </td>
            </tr>
            <tr style="">
                <td align="right" >
                    <span class="need_0"></span>
                    <span class="text_ad_0">部門編號：</span>
                </td>
                <td>
                    <input id="deptno" name="deptno" class="input_0" />
                    <span class="validation_span"></span>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="left" >
                    <div style="margin-top:10px;margin-bottom:20px;margin-left:120px;">
                        <input type="submit" class="btu_0" id="saveBtu" value="保存" style="" />
                        <input type="button" class="btu_0" id="backBtu" value="返回" style="margin-left:20px;" />
                    </div>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>