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>&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>

原文地址：https://www.cnblogs.com/youcong/p/8326002.html

时间： 2024-10-14 15:50:08

layui前端框架之分页

layui前端框架之分页的相关文章

LayUI前端框架开发视频讲解

layui前端框架

easyui前端框架01

web前端框架

15款值得开发者一试的最新的前端框架

能在多种前端框架下使用的表格控件

SSM框架——实现分页和搜索分页

Twitter Bootstrap：前端框架利器

前端框架用哪个好