使用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>