原始页面代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<script type="text/javascript"
src="${APP_PATH}/static/js/jquery-1.12.4.min.js"></script>
<link
href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12"><h2>员工表</h2></div>
</div>
<!-- 按钮 -->
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
<button class="btn btn-danger" id="emp_delete_all_btn">删除</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-striped" id="table">
<thead>
<tr>
<td><input type="checkbox" id="check-all"></input></td>
<td>序号</td>
<td>empName</td>
<td>gender</td>
<td>email</td>
<td>deptName</td>
<td>操作</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-6" id="info">
</div>
<button id="btn">31412</button>
</div>
<div class="row">
<div class="col-md-5 col-md-offset-7">
<nav aria-label="Page navigation">
<ul class="pagination" id="nav">
</ul>
</nav>
</div>
</div>
<div class="row">
<!--分页文字信息 -->
<div class="col-md-6" id="page_info_area"></div>
<!-- 分页条信息 -->
<div class="col-md-6" id="page_nav_area">
</div>
</div>
<!-- -----模态框--- -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">新增员工信息</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="form">
<div class="form-group">
<label for="nput_empName" class="col-sm-2 control-label">empName</label>
<div class="col-sm-5">
<input type="text" name ="empName" class="form-control" id="empName_add_input" placeholder="empName">
</div>
</div>
<div class="form-group">
<label for="email_add_input" class="col-sm-2 control-label">Email</label>
<div class="col-sm-5">
<input type="email" class="form-control" name="email" id="email_add_input" placeholder="Email">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Gender</label>
<div class="col-sm-5">
<label class="radio-inline">
<input type="radio" name="gender" id="gender_add_input1" value="M" checked="checked"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="gender_add_input2" value="F"> 女
</label>
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">deptName</label>
<div class="col-sm-5">
<select class="form-control" id="select" name="dId">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="save_btn">提交</button>
</div>
</div>
</div>
</div>
<!-- ----------- -->
<!-- -----员工修改模态框--- -->
<!-- Modal -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">编辑员工信息</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="form2">
<div class="form-group">
<label for="nput_empName" class="col-sm-2 control-label">empName</label>
<div class="col-sm-5">
<p class="form-control-static" id="emp_Name_static"></p>
</div>
</div>
<div class="form-group">
<label for="email_update_input" class="col-sm-2 control-label">Email</label>
<div class="col-sm-5">
<input type="email" class="form-control" name="email" id="email_update_input" placeholder="Email">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Gender</label>
<div class="col-sm-5">
<label class="radio-inline">
<input type="radio" name="gender" id="gender_update_input1" value="M" checked="checked"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="gender_update_input2" value="F"> 女
</label>
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">deptName</label>
<div class="col-sm-5">
<select class="form-control" id="select2" name="dId">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="update_save_btn">提交</button>
</div>
</div>
</div>
</div>
</div>
<script>
//-------主函数构建页面---------
function build_page(pn){
$.ajax({
url:"${APP_PATH}/emps",
data:"pn="+pn,
type:"GET",
success:function(data){
console.log(data)
//----构建表-------
build_table(data)
//-----记录信息-----------
bulid_info(data)
//-------分页条-------
build_nav(data)
}
})
}
//-------构建表---------------
function build_table(data){
$("#table tbody").empty();
var emps = data.extend.page.list
$.each(emps,function(index,item){
var checkBox = $("<input type='checkbox' class='check_item'/>");
var cbd=$("<td></td>").append(checkBox)
var tr=$("<tr></tr>");
var td1=$("<td></td>").append(item.empId);
var td2=$("<td></td>").append(item.empName);
var td3=$("<td></td>").append(item.gender=="M"?"男":"女");
var td4=$("<td></td>").append(item.email);
var td5=$("<td></td>").append(item.department.deptName);
var btn1=$("<button></button>").addClass("btn btn-primary").append("编辑").attr("deit_id",item.empId).addClass("edit_btn");
var btn2=$("<button></button>").addClass("btn btn-warning").append("删除").addClass("delete_btn").attr("deit_id",item.empId);
var td6=$("<td></td>");
td6.append(btn1).append(btn2);
tr.append(cbd).append(td1).append(td2).append(td3).append(td4).append(td5).append(td6);
$("#table tbody").append(tr);
});
}
//----------------记录信息-----------------------------------
function bulid_info(data){
// 当前12页，共330页，共1773条记录
$("#info").empty()
$("#info").append(" 当前"+data.extend.page.pageNum+"页，共"+data.extend.page.pages+"页，共"+data.extend.page.total+"条记录")
total=data.extend.page.total
current=data.extend.page.pageNum
}
//---------------分页条-----------------
function build_nav(data){
var nav=$("#nav")
nav.empty()
var lastPage=$("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
lastPage.click(function(){
build_page(data.extend.page.total)
});
var next=$("<li></li>").append($("<a></a>").append("»"));
next.click(function(){
build_page(data.extend.page.nextPage)
})
var firstPage=$(" <li><a href='#'>首页</a></li>")
firstPage.click(function(){
build_page(1)
})
var pre=$("<li></li>").append($("<a></a>").append("«"));
pre.click(function(){
build_page(data.extend.page.prePage)
})
$("#nav").append(firstPage).append(pre)
$.each(data.extend.page.navigatepageNums,function(index,item){
var pageli=$(" <li><a href='#'>"+item+"</a></li>")
if(item==(data.extend.page.nextPage-1)){
pageli.addClass("active")
}
pageli.click(function(){
build_page(item)
})
$("#nav").append(pageli)
})
$("#nav").append(next).append(lastPage)
}
//------------------------------
function build_nav2(result){
//page_nav_area
$("#page_nav_area").empty();
var ul = $("<ul></ul>").addClass("pagination");
//构建元素
var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
var prePageLi = $("<li></li>").append($("<a></a>").append("«"));
prePageLi.click(function(){
alert("1")
})
var nextPageLi = $("<li></li>").append($("<a></a>").append("»"));
var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
//添加首页和前一页 的提示
ul.append(firstPageLi).append(prePageLi);
//1,2，3遍历给ul中添加页码提示
$.each(result.extend.page.navigatepageNums,function(index,item){
var numLi = $("<li></li>").append($("<a></a>").append(item));
if(result.extend.page.pageNum == item){
numLi.addClass("active");
}
ul.append(numLi);
});
//添加下一页和末页 的提示
ul.append(nextPageLi).append(lastPageLi);
//把ul加入到nav
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
//-----------新增按钮-------------------
$("#emp_add_modal_btn").click(function(){
//清除表单数据
$("#form")[0].reset()
getDepts()
$("#myModal").modal({
backdrop:"static"})
})
//--------查询所有部门星系--------------------
function getDepts(){
$.ajax({
url:"${APP_PATH}/depts",
type:"GET",
success:function(result){
$("#select").empty()
$.each(result.extend.depts,function(index,deptName){
var option=$("<option></option>").append(this.deptName).attr("value",this.deptId)
$("#select").append(option)
})
}
})
}
//----------------保存按钮----------------------------------
$("#save_btn").click(function(){
alert(1)
//提交模态框数据
if(!validate_add_form()){
alert(2)
return false
}
//判断之前AJAX校验是否成功 成功则往下否则
if($("#save_btn").attr("ajax-valide")=="error"){
return false
}
//发送ajax
$.ajax({
url:"${APP_PATH}/emps",
type:"POST",
data:$("#form").serialize(),
success:function(result){
if(result.code==100){
$('#myModal').modal('hide')
build_page(total)
}else{
//显示失败星系
}
}
})
})
//-----校验方法----
function validate_add_form(){
//1、拿到要校验的数据，使用正则表达式
var empName = $("#empName_add_input").val();
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
if(!regName.test(empName)){
//alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");
$("#empName_add_input").parent().addClass("has-error")
alert("用户名可以是2-5位中文或者6-16位英文和数字的组合")
return false
}
//2、校验邮箱信息
var email = $("#email_add_input").val();
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if(!regEmail.test(email)){
$("#email_add_input").parent().addClass("has-error")
alert("格式错误")
return false
}
return true
}
//--------员工姓名的输入框帮事件判定是否重名---------------
$("#empName_add_input").change(function(){
var empName=this.value
//发送ajax校验是否可用
$.ajax({
url:"${APP_PATH}/checkuser",
data:"empName="+empName,
type:"POST",
success:function(result){
if(result.code==100){
$("#save_btn").attr("ajax-valide","success")
alert("可用")
}else {
$("#save_btn").attr("ajax-valide","error")
alert("不可用")
}
}
})
})
//------重置表单包括样式---------------
function reset_form(ele){
$(ele)[0].reset();
}
//---------编辑按钮绑定事件--------------
$(document).on("click",".edit_btn",function(){
var id=$(this).attr("deit_id")
$("#update_save_btn").attr("deit_id",id)
$.ajax({
url:"${APP_PATH}/depts",
type:"GET",
success:function(result){
$("#select2").empty()
$.each(result.extend.depts,function(index,deptName){
var option=$("<option></option>").append(this.deptName).attr("value",this.deptId)
$("#select2").append(option)
//--------查出员工星系-----------
})
getEmp(id)
}
})
$("#updateModal").modal({
backdrop:"static"})
})
//---------查询员工信息并回显-----------------------
function getEmp(id){
$.ajax({
url:"${APP_PATH}/emp/"+id,
type:"GET",
success:function(result){
var empData=result.extend.emp;
$("#emp_Name_static").text(empData.empName)
$("#email_update_input").val(empData.email)
$("#updateModal input[name=gender]").val([empData.gender])
$("#updateModal select").val([empData.dId])
}
})
}
//--------点击提交保存跟新的编辑信息----------
$("#update_save_btn").on("click",function(){
$.ajax({
url:"${APP_PATH}/emp/"+$(this).attr("deit_id"),
type:"PUT",
data:$("#form2").serialize(),
success:function(result){
if(result.code==100){
$("#updateModal").modal("hide")
build_page(current)
}
}
})
})
//-----------------单个删除删除按钮绑事件--------------------------
$(document).on("click",".delete_btn",function(){
var id=$(this).attr("deit_id")
var empName=$(this).parents("tr").find("td:eq(1)").text()
if(confirm("确认删除"+empName+"吗")){
$.ajax({
url:"${APP_PATH}/emp/"+id,
type:"DELETE",
success:function(result){
alert(result.msg)
build_page(current)
}
})
}
})
$(".delete_btn").on("click",function(){
alert("del")
//是否确认删除
//
})
//--------全选全不选按钮--------------
$("#check-all").click(function(){
//dom原生的属性用prop,attr用于获取自定义属性
$(".check_item").prop("checked",$(this).prop("checked"))
})
$(document).on("click",".check_item",function(){
//判断当前元素是不是五个
if($(".check_item:checked").length==5){
$("#check-all").prop("checked",true)
}else{
$("#check-all").prop("checked",false)
}
})
//-------------全部删除---------
$("#emp_delete_all_btn").click(function(){
var empNames=""
var id_string=""
$.each($(".check_item:checked"),function(index,item){
//alert($(this).parents("tr").find("td:eq(2)").text())
empNames+=$(this).parents("tr").find("td:eq(2)").text()+",";
id_string+=$(this).parents("tr").find("td:eq(1)").text()+"-";
})
empNames=empNames.substring(0,empNames.length-1)
id_string=id_string.substring(0,id_string.length-1)
console.log(id_string)
if(confirm("确认删除"+empNames+"")){
//发送ajax批量删除
$.ajax({
url:"${APP_PATH}/emp/"+id_string,
type:"DELETE",
success:function(result){
alert(result.msg);
build_page(current)
}
})
}
})
//--------调用主函数-------
build_page(1)
</script>
</body>
</html>页面效果
点击新增按钮 会弹出新增模态框并从数据库中查找所有部门信息显示
点击旁边的删除按钮 可以批量删除
点击编辑按钮会弹出编辑模态框
原先页面使用jquery拼接生成页面与绑定时间耦合严重可读性差维护性也很差这里我尝试使用面向对象的方式将其改写
我将这个页面看做一个对象
这个对象可能要有的属性 当前页数 总页数
这个对象可能要有的方法先把构建页面的方法写全
var EmpsPage=function(){ var o={}//总页数 o.pages=0//当前页 return o
}具体写构建页面的代码
var EmpsPage=function(){
var o={
}
o.pages=0
o.current=0
o.buildpage=function(pn){
$.ajax({
url:"${APP_PATH}/emps",
data:"pn="+pn,
type:"GET",
success:function(data){
o.buildTable(data)
o.buildInfo(data)
o.buildNav(data)
}
})
};
o.buildTable=function(data){
$("#table tbody").empty();
var emps = data.extend.page.list
var str=''
for(let i=0;i<5;i++)
{
str+='<tr>';
str+='<td><input type="checkbox" class="check_item"></td>' ;
str+=' <td>'+emps[i].empId+'</td>';
str+='<td>'+emps[i].empName+'</td>' ;
str+='<td>'+(emps[i].gender=="M"?"男":"女")+'</td>';
str+='<td>'+emps[i].email+'</td>' ;
str+='<td>'+emps[i].department.deptName+'</td>';
str+='<td>' ;
str+='<button class="btn btn-primary edit_btn" deit_id="'+emps[i].empId+'">编辑</button>';
str+='<button class="btn btn-warning delete_btn" deit_id="'+emps[i].empId+'">删除</button>';
str+='</td>';
str+='</tr>';
}
$("#table tbody").html(str)
};
o.buildInfo=function(data){
$("#info").empty()
$("#info").append(" 当前"+data.extend.page.pageNum+"页，共"+data.extend.page.pages+"页，共"+data.extend.page.total+"条记录")
o.pages=data.extend.page.pages
o.current=data.extend.page.pageNum
};
o.buildNav=function(data){
var nav=$("#nav")
nav.empty()
str='';
str+='<li><a href="#">首页</a></li>' ;
str+='<li><a>«</a></li>';
for(let i=0;i<data.extend.page.navigatepageNums.length;i++)
{
str+='<li><a href="#" '+(data.extend.page.navigatepageNums[i]==data.extend.page.nextPage-1?'class="active"':'')+' >'+data.extend.page.navigatepageNums[i]+'</a></li>'
}
str+='<li><a>»</a></li>'
str+='<li><a href="#">末页</a></li>'
nav.html(str)
}; return o
}var e= new EmpsPage()
e.buildpage(1)到这就能得到一个没有绑定任何事件的静态页面
接下来我们绑定事件
具体分析页面写下为个按钮绑事件的方法 在bingevent中统一绑定
o.bindevent=function(data){
//新增
o.add()
//编辑
o.edit()
//删除单个
o.del()
//删除多个
o.dels()
//全选全不选按钮
o.clickall()
//分页条
o.nav(data)
};具体实现
//增加窗口
o.add=function(){
//新增按钮打开模态框
$("#emp_add_modal_btn").click(function(){
//清除表单数据
$("#form")[0].reset()
o.getDepts()
$("#myModal").modal({
backdrop:"static"})
})
//----------------保存按钮----------------------------------
$("#save_btn").click(function(){
//提交模态框数据
if(!o.validate_add_form()){
return false
}
//判断之前AJAX校验是否成功 成功则往下否则
if($("#save_btn").attr("ajax-valide")=="error"){
return false
}
//发送ajax
$.ajax({
url:"${APP_PATH}/emps",
type:"POST",
data:$("#form").serialize(),
success:function(result){
if(result.code==100){
$('#myModal').modal('hide')
alert(o.total)
o.buildpage(o.pages)
}else{
//显示失败星系
}
}
})//ajax
})//保存按钮
};
//编辑窗口
o.edit=function(){
$(document).on("click",".edit_btn",function(){
var id=$(this).attr("deit_id")
$("#update_save_btn").attr("deit_id",id)
$.ajax({
url:"${APP_PATH}/depts",
type:"GET",
success:function(result){
$("#select2").empty()
$.each(result.extend.depts,function(index,deptName){
var option=$("<option></option>").append(this.deptName).attr("value",this.deptId)
$("#select2").append(option)
})//each
o.getEmp(id)
}//success
})//ajax
//打开模态框
$("#updateModal").modal({
backdrop:"static"})
})//on
//绑定跟新
$("#update_save_btn").on("click",function(){
$.ajax({
url:"${APP_PATH}/emp/"+$(this).attr("deit_id"),
type:"PUT",
data:$("#form2").serialize(),
success:function(result){
if(result.code==100){
$("#updateModal").modal("hide")
o.buildpage(o.current)
}
}
})
})
//})//click
};
//删除单个
o.del=function(){
$(document).on("click",".delete_btn",function(){
var id=$(this).attr("deit_id")
var empName=$(this).parents("tr").find("td:eq(1)").text()
if(confirm("确认删除"+empName+"吗")){
$.ajax({
url:"${APP_PATH}/emp/"+id,
type:"DELETE",
success:function(result){
o.buildpage(o.current)
}
})
}
})
}
//删除多个
o.dels=function(){
$("#emp_delete_all_btn").click(function(){
var empNames=""
var id_string=""
$.each($(".check_item:checked"),function(index,item){
empNames+=$(this).parents("tr").find("td:eq(2)").text()+",";
id_string+=$(this).parents("tr").find("td:eq(1)").text()+"-";
})
empNames=empNames.substring(0,empNames.length-1)
id_string=id_string.substring(0,id_string.length-1)
console.log(id_string)
if(confirm("确认删除"+empNames+"")){
//发送ajax批量删除
$.ajax({
url:"${APP_PATH}/emp/"+id_string,
type:"DELETE",
success:function(result){
o.buildpage(o.current)
}
})
}
})//click
};
//分页条
o.nav=function(data){
//末页
$("#nav li:eq(8)").click(function(){
o.buildpage(500)
})
//>>
$("#nav li:eq(7)").click(function(){
o.buildpage(data.extend.page.nextPage)
})
//五个页码
for(let i=2;i<=6;i++)
{
$("#nav li:eq("+i+")").click(function(){
o.buildpage(parseInt(this.children[0].innerHTML))
})
}
//<<
$("#nav li:eq(1)").click(function(){
o.buildpage(data.extend.page.prePage)
})
//首页
$("#nav li:eq(0)").click(function(){
o.buildpage(1)
})
}最后把还要一些工具方法也放到对象中
最终代码
//面向对象
var EmpsPage=function(){
var o={
}
o.pages=0
o.current=0
o.buildpage=function(pn){
$.ajax({
url:"${APP_PATH}/emps",
data:"pn="+pn,
type:"GET",
success:function(data){
o.buildTable(data)
o.buildInfo(data)
o.buildNav(data)
o.bindevent(data)
}
})
};
o.buildTable=function(data){
$("#table tbody").empty();
var emps = data.extend.page.list
var str=''
for(let i=0;i<5;i++)
{
str+='<tr>';
str+='<td><input type="checkbox" class="check_item"></td>' ;
str+=' <td>'+emps[i].empId+'</td>';
str+='<td>'+emps[i].empName+'</td>' ;
str+='<td>'+(emps[i].gender=="M"?"男":"女")+'</td>';
str+='<td>'+emps[i].email+'</td>' ;
str+='<td>'+emps[i].department.deptName+'</td>';
str+='<td>' ;
str+='<button class="btn btn-primary edit_btn" deit_id="'+emps[i].empId+'">编辑</button>';
str+='<button class="btn btn-warning delete_btn" deit_id="'+emps[i].empId+'">删除</button>';
str+='</td>';
str+='</tr>';
}
$("#table tbody").html(str)
};
o.buildInfo=function(data){
$("#info").empty()
$("#info").append(" 当前"+data.extend.page.pageNum+"页，共"+data.extend.page.pages+"页，共"+data.extend.page.total+"条记录")
o.pages=data.extend.page.pages
o.current=data.extend.page.pageNum
};
o.buildNav=function(data){
var nav=$("#nav")
nav.empty()
str='';
str+='<li><a href="#">首页</a></li>' ;
str+='<li><a>«</a></li>';
for(let i=0;i<data.extend.page.navigatepageNums.length;i++)
{
str+='<li><a href="#" '+(data.extend.page.navigatepageNums[i]==data.extend.page.nextPage-1?'class="active"':'')+' >'+data.extend.page.navigatepageNums[i]+'</a></li>'
}
str+='<li><a>»</a></li>'
str+='<li><a href="#">末页</a></li>'
nav.html(str)
};
o.bindevent=function(data){
//新增
o.add()
//编辑
o.edit()
//删除单个
o.del()
//删除多个
o.dels()
//全选全不选按钮
o.clickall()
//分页条
o.nav(data)
};
//增加窗口
o.add=function(){
//新增按钮打开模态框
$("#emp_add_modal_btn").click(function(){
//清除表单数据
$("#form")[0].reset()
o.getDepts()
$("#myModal").modal({
backdrop:"static"})
})
//----------------保存按钮----------------------------------
$("#save_btn").click(function(){
//提交模态框数据
if(!o.validate_add_form()){
return false
}
//判断之前AJAX校验是否成功 成功则往下否则
if($("#save_btn").attr("ajax-valide")=="error"){
return false
}
//发送ajax
$.ajax({
url:"${APP_PATH}/emps",
type:"POST",
data:$("#form").serialize(),
success:function(result){
if(result.code==100){
$('#myModal').modal('hide')
alert(o.total)
o.buildpage(o.pages)
}else{
//显示失败星系
}
}
})//ajax
})//保存按钮
};
//编辑窗口
o.edit=function(){
$(document).on("click",".edit_btn",function(){
var id=$(this).attr("deit_id")
$("#update_save_btn").attr("deit_id",id)
$.ajax({
url:"${APP_PATH}/depts",
type:"GET",
success:function(result){
$("#select2").empty()
$.each(result.extend.depts,function(index,deptName){
var option=$("<option></option>").append(this.deptName).attr("value",this.deptId)
$("#select2").append(option)
})//each
o.getEmp(id)
}//success
})//ajax
//打开模态框
$("#updateModal").modal({
backdrop:"static"})
})//on
//绑定跟新
$("#update_save_btn").on("click",function(){
$.ajax({
url:"${APP_PATH}/emp/"+$(this).attr("deit_id"),
type:"PUT",
data:$("#form2").serialize(),
success:function(result){
if(result.code==100){
$("#updateModal").modal("hide")
o.buildpage(o.current)
}
}
})
})
//})//click
};
//删除单个
o.del=function(){
$(document).on("click",".delete_btn",function(){
var id=$(this).attr("deit_id")
var empName=$(this).parents("tr").find("td:eq(1)").text()
if(confirm("确认删除"+empName+"吗")){
$.ajax({
url:"${APP_PATH}/emp/"+id,
type:"DELETE",
success:function(result){
o.buildpage(o.current)
}
})
}
})
}
//删除多个
o.dels=function(){
$("#emp_delete_all_btn").click(function(){
var empNames=""
var id_string=""
$.each($(".check_item:checked"),function(index,item){
empNames+=$(this).parents("tr").find("td:eq(2)").text()+",";
id_string+=$(this).parents("tr").find("td:eq(1)").text()+"-";
})
empNames=empNames.substring(0,empNames.length-1)
id_string=id_string.substring(0,id_string.length-1)
console.log(id_string)
if(confirm("确认删除"+empNames+"")){
//发送ajax批量删除
$.ajax({
url:"${APP_PATH}/emp/"+id_string,
type:"DELETE",
success:function(result){
o.buildpage(o.current)
}
})
}
})//click
};
//分页条
o.nav=function(data){
//末页
$("#nav li:eq(8)").click(function(){
o.buildpage(500)
})
//>>
$("#nav li:eq(7)").click(function(){
o.buildpage(data.extend.page.nextPage)
})
//五个页码
for(let i=2;i<=6;i++)
{
$("#nav li:eq("+i+")").click(function(){
o.buildpage(parseInt(this.children[0].innerHTML))
})
}
//<<
$("#nav li:eq(1)").click(function(){
o.buildpage(data.extend.page.prePage)
})
//首页
$("#nav li:eq(0)").click(function(){
o.buildpage(1)
})
}
//查询员工信息
o.getEmp=function(id){
$.ajax({
url:"${APP_PATH}/emp/"+id,
type:"GET",
success:function(result){
var empData=result.extend.emp;
$("#emp_Name_static").text(empData.empName)
$("#email_update_input").val(empData.email)
$("#updateModal input[name=gender]").val([empData.gender])
$("#updateModal select").val([empData.dId])
}
})
};
//查询所有部门
o.getDepts=function(){
$.ajax({
url:"${APP_PATH}/depts",
type:"GET",
success:function(result){
$("#select").empty()
$.each(result.extend.depts,function(index,deptName){
var option=$("<option></option>").append(this.deptName).attr("value",this.deptId)
$("#select").append(option)
})
}
})
};
//全选全不选按钮
o.clickall=function(){
$("#check-all").click(function(){
//dom原生的属性用prop,attr用于获取自定义属性
$(".check_item").prop("checked",$(this).prop("checked"))
})
$(document).on("click",".check_item",function(){
//判断当前元素是不是五个
if($(".check_item:checked").length==5){
$("#check-all").prop("checked",true)
}else{
$("#check-all").prop("checked",false)
}
})
};
//-----校验方法----
o.validate_add_form=function(){
//1、拿到要校验的数据，使用正则表达式
var empName = $("#empName_add_input").val();
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
if(!regName.test(empName)){
//alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");
$("#empName_add_input").parent().addClass("has-error")
alert("用户名可以是2-5位中文或者6-16位英文和数字的组合")
return false
}
//2、校验邮箱信息
var email = $("#email_add_input").val();
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if(!regEmail.test(email)){
$("#email_add_input").parent().addClass("has-error")
alert("格式错误")
return false
}
return true
};
return o
}
var e= new EmpsPage()
e.buildpage(1)
3835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
