layui前端框架之分页
框架环境: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>
