layui前端框架之分页

时间:2021-04-28 12:42:52

框架环境:SSM框架

为了保证效果,此次演示也用到了jQuery ui框架,大家最好也引入进来

一、去layui官网下载包,解压后,然后导入文件中,最好放再main/webapp文件夹下

官网地址如下:http://www.layui.com/

layui前端框架之分页

二、新建实体类

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>&nbsp;</td>";
}
else {
tr += "<td>" + data[i].employeeNo + "</td>";
} if (data[i].employeeName == "" || data[i].employeeName == undefined) {
tr += "<td>&nbsp;</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>&nbsp;</td>";
}
else {
tr += "<td>" + data[i].sex + "</td>";
} if (data[i].departmentNo == "" || data[i].departmentNo == undefined) {
tr += "<td>&nbsp;</td>";
}
else {
tr += "<td>" + data[i].departmentNo + "</td>"; } if (data[i].entrydate == "" || data[i].entrydate == undefined) {
tr += "<td>&nbsp;</td>";
}
else {
tr += "<td>" + data[i].entrydate + "</td>";
} if (data[i].idnumber == "" || data[i].idnumber == undefined) {
tr += "<td>&nbsp;</td>";
}
else {
tr += "<td>" + data[i].idnumber + "</td>";
} if (data[i].telnumber == "" || data[i].telnumber == undefined) {
tr += "<td>&nbsp;</td>";
}
else {
tr += "<td>" + data[i].telnumber + "</td>";
} if (data[i].post == "" || data[i].post == undefined) {
tr += "<td>&nbsp;</td>";
}
else {
tr += "<td>" + data[i].post + "</td>";
} if (data[i].position == "" || data[i].position == undefined) {
tr += "<td>&nbsp;</td>";
}
else {
tr += "<td>" + data[i].position + "</td>";
} if (data[i].isclerk == "" || data[i].isclerk == undefined) {
tr += "<td>&nbsp;</td>";
}
else {
tr += "<td>" + data[i].isclerk + "</td>";
} if (data[i].iscleaner == "" || data[i].iscleaner == undefined) {
tr += "<td>&nbsp;</td>";
}
else {
tr += "<td>" + data[i].iscleaner + "</td>";
} if (data[i].cleanIndex == "" || data[i].cleanIndex == undefined) {
tr += "<td>&nbsp;</td>";
}
else {
tr += "<td>" + data[i].cleanIndex + "</td>";
} if (data[i].status == "" || data[i].status == undefined) {
tr += "<td>&nbsp;</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>

相关文章