框架環境:SSM框架
為了保證效果，此次演示也用到了jQuery ui框架，大家最好也引入進來
一、去layui官網下載包，解壓后，然后導入文件中，最好放再main/webapp文件夾下
官網地址如下:http://www.layui.com/
二、新建實體類
package cn.pms.model; import java.util.Date; public class Employee { /** 工號*/ private String employeeNo; /** */ private Integer id; /** 姓名*/ private String employeeName; /** */ private String departmentNo; /** 性別*/ private String sex; /** */ private String idnumber; /** */ private String entrydate; /** */ private String bornday; /** */ private String telnumber; /** */ private String address; /** 崗位*/ private String post; /** 中專大專本科研究生碩士博士其他*/ private String education; /** 職位*/ private String position; /** 打掃指標*/ private String cleanIndex; /** 是否打掃員*/ private String iscleaner; /** 是否業務員*/ private String isclerk; /** 狀態在職離職*/ private String status; public String getEmployeeNo() { return employeeNo; } public void setEmployeeNo(String employeeNo) { this.employeeNo = employeeNo == null ? null : employeeNo.trim(); } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getEmployeeName() { return employeeName; } public void setEmployeeName(String employeeName) { this.employeeName = employeeName == null ? null : employeeName.trim(); } public String getDepartmentNo() { return departmentNo; } public void setDepartmentNo(String departmentNo) { this.departmentNo = departmentNo == null ? null : departmentNo.trim(); } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex == null ? null : sex.trim(); } public String getIdnumber() { return idnumber; } public void setIdnumber(String idnumber) { this.idnumber = idnumber == null ? null : idnumber.trim(); } public String getTelnumber() { return telnumber; } public void setTelnumber(String telnumber) { this.telnumber = telnumber == null ? null : telnumber.trim(); } public String getAddress() { return address; } public void setAddress(String address) { this.address = address == null ? null : address.trim(); } public String getPost() { return post; } public void setPost(String post) { this.post = post == null ? null : post.trim(); } public String getEducation() { return education; } public void setEducation(String education) { this.education = education == null ? null : education.trim(); } public String getPosition() { return position; } public void setPosition(String position) { this.position = position == null ? null : position.trim(); } public String getCleanIndex() { return cleanIndex; } public void setCleanIndex(String cleanIndex) { this.cleanIndex = cleanIndex == null ? null : cleanIndex.trim(); } public String getStatus() { return status; } public void setStatus(String status) { this.status = status == null ? null : status.trim(); } public String getEntrydate() { return entrydate; } public void setEntrydate(String entrydate) { this.entrydate = entrydate; } public String getBornday() { return bornday; } public void setBornday(String bornday) { this.bornday = bornday; } public String getIscleaner() { return iscleaner; } public void setIscleaner(String iscleaner) { this.iscleaner = iscleaner; } public String getIsclerk() { return isclerk; } public void setIsclerk(String isclerk) { this.isclerk = isclerk; } @Override public String toString() { return "Employee [employeeNo=" + employeeNo + ", id=" + id + ", employeeName=" + employeeName + ", departmentNo=" + departmentNo + ", sex=" + sex + ", idnumber=" + idnumber + ", entrydate=" + entrydate + ", bornday=" + bornday + ", telnumber=" + telnumber + ", address=" + address + ", post=" + post + ", education=" + education + ", position=" + position + ", cleanIndex=" + cleanIndex + ", iscleaner=" + iscleaner + ", isclerk=" + isclerk + ", status=" + status + "]"; } }
二、寫mapper類和對應的xml
package cn.pms.mapper; import java.util.List; import java.util.Map; import org.apache.ibatis.annotations.Param; import cn.pms.model.AppAccount; import cn.pms.model.Employee; /** * 員工接口 * @author youcong * */ public interface EmployeeMapper { public List<Employee> selectAllEmployee(Map<String, Object> paramMap);//查詢所有用員工分頁查詢 public int selectEmployeePageCount(Map<String, Object> paramMap);//查詢所有員工總數 }
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" > <mapper namespace="cn.pms.mapper.EmployeeMapper" > <resultMap type="Employee" id="employees"> <id column="employee_no" property="employeeNo" jdbcType="VARCHAR" /> <result column="id" property="id" jdbcType="INTEGER" /> <result column="employee_name" property="employeeName" jdbcType="VARCHAR" /> <result column="department_no" property="departmentNo" jdbcType="VARCHAR" /> <result column="sex" property="sex" jdbcType="VARCHAR" /> <result column="idnumber" property="idnumber" jdbcType="VARCHAR" /> <result column="entrydate" property="entrydate" jdbcType="VARCHAR" /> <result column="bornday" property="bornday" jdbcType="VARCHAR" /> <result column="telnumber" property="telnumber" jdbcType="VARCHAR" /> <result column="address" property="address" jdbcType="VARCHAR" /> <result column="post" property="post" jdbcType="VARCHAR" /> <result column="education" property="education" jdbcType="VARCHAR" /> <result column="position" property="position" jdbcType="VARCHAR" /> <result column="clean_index" property="cleanIndex" jdbcType="VARCHAR" /> <result column="iscleaner" property="iscleaner" jdbcType="VARCHAR" /> <result column="isclerk" property="isclerk" jdbcType="VARCHAR" /> <result column="status" property="status" jdbcType="VARCHAR" /> </resultMap> <select id="selectAllEmployee" resultMap="employees"> select * from `employee` <where> <if test="queryText != null"> and employeeName like concat('%', #{queryText}, '%') </if> </where> order by id desc limit #{start}, #{size} </select> <select id="selectEmployeePageCount" resultType="int"> select count(*) from `employee` <where> <if test="queryText != null"> and employeeName like concat('%', #{queryText}, '%') </if> </where> </select> </mapper>
三、對應的service和service實現類
package cn.pms.service; import java.util.List; import java.util.Map; import org.apache.ibatis.annotations.Param; import cn.pms.model.Employee; /** * 員工業務接口 * @author eluzhu * */ public interface EmployeeService { public List<Employee> selectAllEmployee(Map<String, Object> paramMap);//查詢所有用員工分頁查詢 public int selectEmployeePageCount(Map<String, Object> paramMap);//查詢所有員工總數 }
package cn.pms.service.impl; import java.util.List; import java.util.Map; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import cn.pms.mapper.EmployeeMapper; import cn.pms.model.Employee; import cn.pms.service.EmployeeService; /** * 員工業務接口實現類 * @author youcong * * */ @Service public class EmployeeServiceImpl implements EmployeeService{ @Autowired private EmployeeMapper employeeMapper; @Override public List<Employee> selectAllEmployee(Map<String, Object> paramMap) { // TODO Auto-generated method stub return employeeMapper.selectAllEmployee(paramMap); } @Override public int selectEmployeePageCount(Map<String, Object> paramMap) { // TODO Auto-generated method stub return employeeMapper.selectEmployeePageCount(paramMap); } }
四、Controller和AJAXResult類
package cn.pms.model; public class AJAXResult { private boolean success; //返回碼 private String returnCode; //返回信息 private String returnMsg; //返回數據 private Object data; public boolean isSuccess() { return success; } public void setSuccess(boolean success) { this.success = success; } public String getReturnCode() { return returnCode; } public void setReturnCode(String returnCode) { this.returnCode = returnCode; } public String getReturnMsg() { return returnMsg; } public void setReturnMsg(String returnMsg) { this.returnMsg = returnMsg; } public Object getData() { return data; } public void setData(Object data) { this.data = data; } }
package cn.pms.controller; import java.io.IOException; import java.io.PrintWriter; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; import cn.pms.model.AJAXResult; import cn.pms.model.AppAccount; import cn.pms.model.Department; import cn.pms.model.Employee; import cn.pms.model.Hotel; import cn.pms.model.Page; import cn.pms.service.DepartmentService; import cn.pms.service.EmployeeService; /** * 員工信息管理 * * @author youcong * */ @Controller public class EmployeeController { @Autowired private EmployeeService employeeService; /** * 查詢所有員工，主要用於分頁查詢 */ @RequestMapping(value="/queryEmployee", method = RequestMethod.POST, produces = "application/json;charset=utf-8") @ResponseBody public Object queryEmployee(HttpServletRequest request) { AJAXResult result = new AJAXResult(); String pages = request.getParameter("pagesize"); System.out.println("queryEmployee ==== pages : " + pages); //查詢條件 String queryText = request.getParameter("queryText"); System.out.println("queryEmployee ==== queryText : " + queryText); String pagen = request.getParameter("pageno"); System.out.println("queryEmployee ==== pagen : " + pagen); //當前頁 Integer pageno = Integer.parseInt(pagen.trim()); //每頁的數量 Integer pagesize = Integer.parseInt(pages.trim()); Map<String, Object> paramMap = new HashMap<String, Object>(); //檢驗查詢參數 if ( queryText != null ) { if ( queryText.indexOf("\\") != -1 ) { queryText = queryText.replaceAll("\\\\", "\\\\\\\\"); } if ( queryText.indexOf("%") != -1 ) { queryText = queryText.replaceAll("%", "\\\\%"); } if ( queryText.indexOf("_") != -1 ) { queryText = queryText.replaceAll("_", "\\\\_"); } } if(queryText != null && queryText != "") { queryText = queryText.trim(); } paramMap.put("queryText", queryText); paramMap.put("size", pagesize); paramMap.put("start", (pageno - 1) * pagesize); try { //查詢現有的用戶 List<Employee> e_list = employeeService.selectAllEmployee(paramMap); //查詢用戶數量 int count = employeeService.selectEmployeePageCount(paramMap); System.out.println("用戶數量 = ： " + count); int totalno = 0; if ( count % pagesize == 0 ) { totalno = count / pagesize; } else { totalno = count / pagesize + 1; } Page<Employee> ePage = new Page<>(); ePage.setDatas(e_list); ePage.setTotalno(totalno); ePage.setTotalsize(count); //查詢數據庫成功，返回成功碼 result.setData(ePage); result.setSuccess(true); result.setReturnCode("000000"); result.setReturnMsg("success"); return result; } catch (Exception e) { e.printStackTrace(); //查詢數據庫失敗，返回失敗碼 result.setReturnCode("111111"); result.setReturnMsg("error"); return result; } } }
五、jsp頁面代碼
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <% String path = request.getContextPath(); %> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>e路住酒店管理平台</title> <link href="<%=path%>/css/main.css" type="text/css" rel="stylesheet"> <link rel="stylesheet" href="<%=path%>/layui/css/layui.css" media="all"> <script src="<%=path%>/js/easyui/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="<%=path%>/layui/layui.js" charset="utf-8"></script> <script src="<%=path%>/js/layer/layer-v3.1.1/layer/mobile/layer.js" type="text/javascript"></script> <link rel="stylesheet" href="<%=path%>/css/jquery-ui-1.10.4.custom.css" /> <script src="<%=path%>/js/jquery-ui-1.10.4.custom.js"></script> <script src="<%=path%>/js/jquery-ui-1.10.4.custom.min.js"></script> <script type="text/javascript"> var condflg = false; $(function () { //彈框 //員工信息添加 $(".man_add").dialog({ autoOpen : false, height : 500, width : 600, modal : true, }); $(".man_opener1").button().click(function() { $(".man_add").dialog("open"); }); $(".man_add2").dialog({ autoOpen : false, height : 500, width : 600, modal : true, }); //日期選擇 $(".datepicker").datepicker({ changeMonth : true, changeYear : true }); $(".man_opener2").button().click(function() { //有待處理補充 }); //頁數判斷 <c:if test="${empty param.pageno}"> pageQuery(1); </c:if> <c:if test="${not empty param.pageno}"> pageQuery(${param.pageno}); </c:if> $("#queryBtn").click(function(){ var queryText = $("#queryText").val(); if ( queryText == "" ) { pageQuery(1); } else { condflg = true; pageQuery(1); } }); }); //裝變量的容器,可以使用多個分頁器 var dataObj = { page_enterprise : 1, page_order : 1, page_log: 1, page_log_info: 1, //選擇每頁顯示的數據條數 limit_enterprise: 2, limit_order: 20, limit_log: 30, limit_log_info: 40 } function pageQuery(pageno) { var jsonData = { "pageno" : pageno, "pagesize" : dataObj.limit_enterprise } if ( condflg ) { jsonData.queryText = $("#queryText").val(); } $.ajax({ url : "/ssm_pms/queryEmployee", type : "POST", //contentType: 'application/json;charset=utf-8', data : jsonData, dataType : 'json', success : function(result){ condflg = false; if(result.returnCode == "000000" && result.returnMsg == "success"){ //alert("result.returnCode" + result.returnCode); var appPage = result.data; var apps = result.data.datas; startAllAppoint = pageno;//當前頁數 //alert("當前頁數" + startAllAppoint) dataLength = result.data.totalsize;//數據總條數 //alert("數據總條數" + dataLength); //alert("apps ==== " + apps); var appRows = ""; $.each(apps, function(i, app){ appRows = appRows + '<tr>'; appRows = appRows + ' <td>'+app.employeeNo +'</td>'; appRows = appRows + ' <td>'+app.employeeName+'</td>'; appRows = appRows + ' <td>'+app.sex+'</td>'; appRows = appRows + ' <td>'+app.departmentNo+'</td>'; appRows = appRows + ' <td>'+app.entrydate+'</td>'; appRows = appRows + ' <td>'+app.idnumber+'</td>'; appRows = appRows + ' <td>'+app.telnumber+'</td>'; appRows = appRows + ' <td>'+app.post+'</td>'; appRows = appRows + ' <td>'+app.position+'</td>'; appRows = appRows + ' <td>'+app.isclerk+'</td>'; appRows = appRows + ' <td>'+app.iscleaner+'</td>'; appRows = appRows + ' <td>'+app.cleanIndex+'</td>'; appRows = appRows + ' <td>'+app.status+'</td>'; appRows = appRows + ' <td>'; appRows = appRows + " </span><a href='#' onclick='editEmployeeInfo(" + app.id + ",\"" + app.employeeNo + "\",\""+app.employeeName+"\",\"" + app.sex + "\",\"" + app.departmentNo + "\",\"" + app.entrydate + "\",\"" +app.idnumber+ "\",\"" + app.telnumber +"\",\"" + app.post + "\",\"" +app.position + "\",\"" +app.cleanIndex + "\",\"" + app.isclerk+"\",\"" + app.iscleaner+"\",\"" + app.status+"\",)'><button>編輯</button></a></span>"; appRows = appRows + " <a href='#' onclick='Del(\"" + app.employeeNo + "\")'><button class='man_opener'>刪除</button></a>"; appRows = appRows + ' </td>'; appRows = appRows + '</tr>'; }); $("#appAccount_list").html(appRows); //調用分頁 layui.use(['laypage', 'layer'], function() { var laypage = layui.laypage, layer = layui.layer; laypage.render({ elem: 'enterpriseOrder', count: dataLength, limit: dataObj.limit_enterprise, first: '首頁', last: '尾頁', layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], curr: dataObj.page_enterprise, theme: '#00A0E9', jump:function(obj,first){ if(!first) { //***第一次不執行,一定要記住,這個必須有,要不然就是死循環 var curr = obj.curr; //更改存儲變量容器中的數據,是之隨之更新數據 dataObj.page_enterprise = obj.curr; dataObj.limit_enterprise= obj.limit; //回調該展示數據的方法,數據展示 pageQuery(curr); } } }); }); }else{ layer.msg("失敗", {time:2000, icon:5, shift:6}); } } }); } function appAccountData(data) { //alert("fillData...." + data); for (var i = 0; i < data.length; i++) { var tr = "<tr>"; //alert(data.length); if (data[i].employeeNo == "" || data[i].employeeNo == undefined) { //alert(data[i].nickName); tr += "<td> </td>"; } else { tr += "<td>" + data[i].employeeNo + "</td>"; } if (data[i].employeeName == "" || data[i].employeeName == undefined) { tr += "<td> </td>"; } else { tr += "<td>" + data[i].employeeName + "</td>"; } //tr += "<td>" + data.appAccount[i].memberId + "</td>"; if (data[i].sex == "" || data[i].sex == undefined) { tr += "<td> </td>"; } else { tr += "<td>" + data[i].sex + "</td>"; } if (data[i].departmentNo == "" || data[i].departmentNo == undefined) { tr += "<td> </td>"; } else { tr += "<td>" + data[i].departmentNo + "</td>"; } if (data[i].entrydate == "" || data[i].entrydate == undefined) { tr += "<td> </td>"; } else { tr += "<td>" + data[i].entrydate + "</td>"; } if (data[i].idnumber == "" || data[i].idnumber == undefined) { tr += "<td> </td>"; } else { tr += "<td>" + data[i].idnumber + "</td>"; } if (data[i].telnumber == "" || data[i].telnumber == undefined) { tr += "<td> </td>"; } else { tr += "<td>" + data[i].telnumber + "</td>"; } if (data[i].post == "" || data[i].post == undefined) { tr += "<td> </td>"; } else { tr += "<td>" + data[i].post + "</td>"; } if (data[i].position == "" || data[i].position == undefined) { tr += "<td> </td>"; } else { tr += "<td>" + data[i].position + "</td>"; } if (data[i].isclerk == "" || data[i].isclerk == undefined) { tr += "<td> </td>"; } else { tr += "<td>" + data[i].isclerk + "</td>"; } if (data[i].iscleaner == "" || data[i].iscleaner == undefined) { tr += "<td> </td>"; } else { tr += "<td>" + data[i].iscleaner + "</td>"; } if (data[i].cleanIndex == "" || data[i].cleanIndex == undefined) { tr += "<td> </td>"; } else { tr += "<td>" + data[i].cleanIndex + "</td>"; } if (data[i].status == "" || data[i].status == undefined) { tr += "<td> </td>"; } else { tr += "<td>" + data[i].status + "</td>"; } tr += "</tr>"; $("#appAccount_list").append($(tr)); } } //刪除 function Del(employeeNo){ var b=confirm("你確定要將該員工信息刪除?"); if(b){ $.ajax({ type:"POST", async:true, url:"${pageContext.request.contextPath}/deleteEmployeeInfo", dataType:"json", data:{"employeeNo":employeeNo}, success:function(data){ alert("成功刪除"); window.location.href='/ssm_pms/pages/Set/salesMan.jsp'; } }); }else{ alert("取消刪除"); } } //添加用戶 //添加員工信息 function AddEmployee(){ var employeeNo=$("#employeeNo").val(); //員工名 var employeeName=$("#employeeName").val(); //性別 var sex=$("#sex").val(); //部門號 var departmentNo=$("#departmentNo").val(); //身份證號碼 var idnumber=$("#idnumber").val(); //入職日期 var entrydate=$("#entrydate").val(); //出生日期 var bornday=$("#bornday").val(); //電話號碼 var telnumber=$("#telnumber").val(); //地址 var address=$("#address").val(); //學歷 var education=$("#education").val(); //崗位 var post=$("#post").val(); //職位 var position=$("#position").val(); //打掃指標 var cleanIndex=$("#cleanIndex").val(); //是否是業務員 var isclerk=$(".isclerk").val(); //是否是清潔員 var iscleaner=$(".iscleaner").val(); //狀態 var status=$(".status").val(); var data = { employeeNo : employeeNo, employeeName : employeeName, sex : sex, departmentNo : departmentNo, idnumber : idnumber, entrydate : entrydate, bornday : bornday, telnumber : telnumber, address : address, education : education, post : post, position : position, cleanIndex : cleanIndex, isclerk : isclerk, iscleaner:iscleaner, status : status } $.ajax({ url:"${pageContext.request.contextPath}/insertEmployeeInfo", type:"POST", async:true, data:JSON.stringify(data), contentType: 'application/json;charset=utf-8', sucess:function(result){ alert("成功添加員工信息"); window.location.href='/ssm_pms/pages/Set/salesMan.jsp'; }, dataType:"json" }); } //編輯用戶 //編輯員工信息 function editEmployeeInfo(id,employeeNo,employeeName,sex,departmentNo,entryDate,idnumber,telnumber,post,position,cleanIndex,isclerk,iscleaner,status){ alert(isclerk); $("#id_edit").val(id); $("#employeeNo_edit").val(employeeNo); $("#employeeName_edit").val(employeeName); $("#sex_edit").val(sex); $("#idnumber_edit").val(idnumber); $("#entryDate_edit").val(entryDate); $("#telnumber_edit").val(telnumber); $("#post_edit").val(post); $("#position_edit").val(position); $(".isclerk_edit").val(isclerk); $("#cleanIndex_edit").val(cleanIndex); $(".iscleaner_edit").val(iscleaner); $(".status_edit").val(status); $(".man_add2").dialog("open"); } //修改員工信息 function updateEmployeeInfo(){ var id=$("#id_edit").val(); var employeeNo=$("#employeeNo_edit").val(); var employeeName=$("#employeeName_edit").val(); var sex=$("#sex_edit").val(); var departmentNo=$("#departmentNo_edit").val(); var idnumber=$("#idnumber_edit").val(); var entrydate=$("#entryDate_edit").val(); var telnumber=$("#telnumber_edit").val(); var post=$("#post_edit").val(); var position=$("#position_edit").val(); var isclerk=$(".isclerk_edit").val(); var cleanIndex=$("#cleanIndex_edit").val(); var iscleaner=$(".iscleaner_edit").val(); var status=$(".status_edit").val(); alert(cleanIndex); var data = { id : id, employeeNo : employeeNo, employeeName : employeeName, sex : sex, departmentNo : departmentNo, idnumber : idnumber, entrydate : entrydate, telnumber : telnumber, post : post, position : position, cleanIndex : cleanIndex, isclerk : isclerk, iscleaner:iscleaner, status : status } $.ajax({ url : "${pageContext.request.contextPath}/updateEmployeeInfo", type : "POST", contentType: 'application/json;charset=utf-8', data : JSON.stringify(data), dataType : 'json', success : function(result){ if(result.returnCode == "000000" && result.returnMsg == "success"){ alert("修改成功"); window.location.href = "/ssm_pms/pages/Set/salesMan.jsp"; }else{ alert("修改失敗"); } } }); } </script> </head> <body> <div class="main" style="width: 98%;"> <h1 class="itset">員工管理</h1> <div class="search_goods"> <label>業務員：</label> <select id="IsSalesMan"> <option value="">全部</option> <option value="1">是</option> <option value="0">否</option> </select> <label>狀態：</label> <select id="Status"> <option value="">全部</option> <option value="0">在職</option> <option value="1">離職</option> </select> <input id="txtKey" type="text" placeholder="工號/名稱/拼音碼" /> <input type="button" id="queryBtn" value="查詢" class="bus_search" /> </div> <table cellpadding="0" cellspacing="0" class="account"> <thead> <tr> <th>工號</th> <th>姓名</th> <th>性別</th> <th>部門</th> <th style="display: none;">出生日期</th> <th>入職日期</th> <th>身份證號</th> <th style="display: none;">學歷</th> <th>手機號碼</th> <th style="display: none;">電話</th> <th>崗位</th> <th>職位</th> <th>業務員</th> <th>打掃員</th> <th>打掃指標</th> <th>狀態</th> <th>操作</th> </tr> </thead> <tbody id="appAccount_list"> </tbody> <tfoot> <tr> <td colspan="20" align="center"> <ul class="pagination"></ul> </td> </tr> </tfoot> </table> </div> <div class="hotel_db"> <div class="fl"> <input type="button" value="添加員工" class="man_opener1" /> </div> </div> <!-- 分頁器 --> <div class="pagePicker"> <!--自定義的分頁器--> <div id="enterpriseOrder"></div> </div> <!-- 新增員工信息 --> <div class="man_add"> <!--彈出窗口--> <div class="pop"> <div class="line"> <div class="fl">添加員工</div> <div class="errortips" id="btnRead" style="float: left; font-size: 12px; width: 530px; overflow: hidden"></div> </div> <form class="form-group"> <ul class="as"> <li><label><b style="color: red; margin-right: 5px;">*</b>工號：</label><input type="text" id="employeeNo" maxlength="10" required="required" /> <span class="info1" style="color: red; font-size: 8px;" ></span></li> <li><label><b style="color: red; margin-right: 5px;">*</b>姓名：</label><input type="text" id="employeeName" maxlength="10" required="required" /></li> <li><label>性別：</label> <select id="sex"> <option value="男">男</option> <option value="女">女</option> </select></li> <li><label>部門：</label> <select id="departmentNo"> <option value="1">清潔部</option> </select></li> <!-- <li><label>拼音碼：</label><input type="text" id="PYM" maxlength="25" /></li> --> <li><label>身份證號：</label><input type="text" maxlength="18" id="idnumber" /></li> <li><label>入職日期：</label><input type="text" class="datepicker" id="entrydate" /></li> <li><label><b style="color: red; margin-right: 5px;">*</b>手機號：</label><input type="text" id="telnumber" maxlength="11" required="required" /></li> <li><label>學歷：</label> <select id="education"> <option value="1">中專</option> <option value="2">大專</option> <option value="3">本科</option> <option value="4">研究生</option> <option value="5">碩士</option> <option value="6">博士</option> <option value="7">其他</option> </select></li> <li><label>崗位：</label><input type="text" id="post" maxlength="10" /></li> <li><label>職位：</label><input type="text" id="position" maxlength="10" /></li> <li><label><b style="color: red; margin-right: 5px;">*</b>打掃指標：</label><input type="text" id="cleanIndex" maxlength="5" /></li> <li><label>業務員：</label> <input type="radio" class="isclerk radio" name="IsSalesman" checked="checked" value="1" /> <p>是</p> <input type="radio" class="isclerk radio" name="IsSalesman" value="0" /> <p>否</p></li> <li><label>打掃員：</label> <input type="radio" class="iscleaner radio" name="IsClean" checked="checked" value="1" /> <p>是</p> <input type="radio" class="iscleaner radio" name="IsClean" value="0" /> <p>否</p></li> <li><label>狀態：</label> <input type="radio" class="status radio" name="Status" checked="checked" value="1" /> <p>在職</p> <input type="radio" class="status radio" name="Status" value="0" /> <p>離職</p></li> <!-- <li id="liCleanerPassword" style="display: none;"><label>打掃員密碼：</label> <input type="password" value="" id="CleanerPassword" name="CleanerPassword" /></li> --> <li style="margin: 30px 0px 10px 230px; margin-left: 220px;"> <!-- <input type="button" value="確認" class="bus_add" id="BtnAdd" /> <input type="button" value="關閉" class="bus_dell" id="BtnDel" /> --> <input type="submit" value="確認" onclick="AddEmployee()" /> </li> </ul> </form> </div> </div> <!-- 編輯員工信息 --> <!-- 編輯員工信息 --> <div class="man_add2"> <!--彈出窗口--> <div class="pop"> <div class="line"> <div class="fl">編輯員工</div> <div class="errortips" id="btnRead" style="float: left; font-size: 12px; width: 530px; overflow: hidden"></div> </div> <form class="form-group"> <ul class="as"> <li style="display:none;"><label><b style="color: red; margin-right: 5px;">*</b>工號：</label><input type="text" id="id_edit" maxlength="10" /> <span class="info1" style="color: red; font-size: 8px;"></span></li> <li><label><b style="color: red; margin-right: 5px;">*</b>工號：</label><input type="text" id="employeeNo_edit" maxlength="10" /> <span class="info1" style="color: red; font-size: 8px;"></span></li> <li><label><b style="color: red; margin-right: 5px;">*</b>姓名：</label><input type="text" id="employeeName_edit" maxlength="10" /></li> <li><label>性別：</label> <select id="sex_edit"> <option value="男">男</option> <option value="女">女</option> </select></li> <li><label>部門：</label> <select id="departmentNo_edit"> <option value="1">清潔部</option> </select></li> <li><label>入職日期：</label><input type="text" class="datepicker" id="entryDate_edit" /></li> <li><label>身份證號：</label><input type="text" maxlength="18" id="idnumber_edit" /></li> <li><label><b style="color: red; margin-right: 5px;">*</b>手機號：</label><input type="text" id="telnumber_edit" maxlength="11" /></li> <li><label>崗位：</label><input type="text" id="post_edit" maxlength="10" /></li> <li><label>職位：</label><input type="text" id="position_edit" maxlength="10" /></li> <li><label><b style="color: red; margin-right: 5px;">*</b>打掃指標：</label><input type="text" id="cleanIndex_edit" maxlength="5" /></li> <li><label>業務員：</label> <input type="radio" class="isclerk_edit radio" name="IsSalesman" checked="checked" value="1" /> <p>是</p> <input type="radio" class="isclerk_edit radio" name="IsSalesman" value="0" /> <p>否</p></li> <li><label>打掃員：</label> <input type="radio" class="iscleaner_edit radio" name="IsClean" checked="checked" value="1" /> <p>是</p> <input type="radio" class="iscleaner_edit radio" name="IsClean" value="0" /> <p>否</p></li> <li><label>狀態：</label> <input type="radio" class="status_edit radio" name="Status" checked="checked" value="1" /> <p>在職</p> <input type="radio" class="status_edit radio" name="Status" value="0" /> <p>離職</p></li> <li id="liCleanerPassword" style="display: none;"><label>打掃員密碼：</label> <input type="password" value="" id="CleanerPassword" name="CleanerPassword" /></li> <li style="margin: 30px 0px 10px 230px; margin-left: 220px;"> <!-- <input type="button" value="確認" class="bus_add" id="BtnAdd" /> <input type="button" value="關閉" class="bus_dell" id="BtnDel" /> --> <input type="submit" value="確認" onclick="updateEmployeeInfo()" /> </li> </ul> </form> </div> </div> </body> </html>