SSM:八、CRUD的增加员工功能
在jsp文件中写入增加员工信息的模态框
<!-- 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">
<div class="form-group">
<label for="add_emp_Name" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-6">
<input type="text" name="empName" class="form-control" id="add_emp_Name" placeholder="请输入姓名"/>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="add_emp_Email" class="col-sm-2 control-label">email</label>
<div class="col-sm-6">
<input type="email" name="email" class="form-control" id="add_emp_Email" placeholder="请输入邮箱">
<span class="help-block"></span>
</div>
</div>
<!--内联单选按钮-->
<div class="form-group">
<label for="add_emp_Email" class="col-sm-2 control-label">性别</label>
<div class="col-sm-8">
<label class="radio-inline col-sm-2">
<input type="radio" name="gender" id="add_emp_gender1" value="M" checked="checked"> 男
</label>
<label class="radio-inline col-sm-2">
<input type="radio" name="gender" id="add_emp_gender2" value="F"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="add_emp_Email" class="col-sm-2 control-label">部门</label>
<div class="col-sm-4">
<select class="form-control col-sm-4" 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="add_button">增加</button>
</div>
</div>
</div>
</div>
<!--modal结束-->
用ajax将部门的信息传入模态框中。
Department的service层方法
@Autowired
DepartmentMapper departmentMapper;
public List<Department> getDept() {
List<Department> departments = departmentMapper.selectByExample(null);
return departments;
}
Department的Controller层方法
@Autowired
DepartmentService departmentService;
//返回department的部门的json数据
@RequestMapping("/depts")
@ResponseBody
public Msg getDepts () {
List<Department> dept = departmentService.getDept();
return Msg.success().add("dept",dept);
}
js发送的ajax请求
$('#add_emp').click(function () {
//在打开静态框之前加载部门信息
getDepts()
//弹出静态框
$('#myModal').modal({
backdrop : 'static'
})
})
function getDepts() {
$.ajax({
url:'${APP_PATH}/depts',
type:'GET',
success:function (result) {
console.log(result);
//遍历department数据，将json数据添加进option中,再加入option属性进select标签中
$.each(result.extend.dept,function () {
var optionEle = $('<option></option>')
.append(this.deptName)
.attr('value',this.deptId)
.appendTo($('#myModal select'));
})
}
})
}
在后端添加增加员工的Service和Controller方法。
Service层
public void addEmp(Employee employee) {
//选择性插入
employeeMapper.insertSelective(employee);
}
Controller层
//增加员工
@RequestMapping(value = "/emp",method = RequestMethod.POST)
@ResponseBody
public Msg addEmp(Employee employee) {
employeeService.addEmp(employee);
return Msg.success();
}
利用ajax将数据插入进数据库，并在增加完成后关闭模态框和将页面转向最后一条插入数据的页面。
//增加员工的ajax
$('#add_button').click(function () {
//对json数据序列化
//console.log($('#myModal form').serialize());
//用ajax对增加的数据进行解析
$.ajax({
url:"${APP_PATH}/emp",
type:"POST",
data:$('#myModal form').serialize(),
success:function (result) {
//alert(result.message)
//处理成功后营完成以下需求：
//1、关闭静态模块框
$('#myModal').modal('hide');
//2、页面转向最后一条插入数据的页面
//将总记录数传入，只要比全部页数大就转到最后一页。
to_Page(total_page);
}
});
})
对要输入的信息进行验证。
在#add_button按钮上添加以下内容。
//在数据提交给服务器前对输入的数据格式进行校验
if(!invalid_form()) {
//如果invalid_form()方法没有返回true，就返回false
return false;
}
验证的信息，对输入的empName和Email进行正则表达式判断。
此处将添加样式的方法提出来，可以简化代码的编写。
//校验员工姓名和邮箱的格式是否正确
function invalid_form() {
var empName = $('#add_emp_Name').val();
//正则表达式-->6-16位英文以及数字组成或者2-5位中文组成
var regName = /(^[a-z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
//判断是否相同,如果不相同提示
if(!regName.test(empName)) {
show_invalid('#add_emp_Name','error','姓名由6-16位英文以及数字组成或者2-5位中文组成');
// alert("格式不正确")
return false;
}else{
show_invalid('#add_emp_Name','success','')
};
//测试邮箱的格式
var empEmail = $('#add_emp_Email').val();
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if(!regEmail.test(empEmail)) {
show_invalid('#add_emp_Email','error','邮箱格式不正确！');
return false;
}else{
show_invalid('#add_emp_Email','success','')
}
return true;
}
//显示校验的信息的样式
function show_invalid(id,status,info) {
//当需要检验的时候，清空校验所在的css样式
$(id).parent().removeClass('has-error has-success')
if('error' == status) {
$(id).parent().addClass('has-error');
$(id).next("span").text(info);
}else if('success' == status) {
$(id).parent().addClass('has-success');
$(id).next("span").text("");
}
}
今天是3月的最后一天，每天都要好好的，好好照顾自己，真心对待你喜欢的人和你的亲人，这就够了。
四月，请你对我好好的。