基础增删查改练习—新增

MVC课程也到此告一段落了。把上课的的内容敲完后，练习一下老师发给我们的MVC小练习，也可以检验一下自己，这个mvc练习是老师从它项目中切割下来的一小块，让我们练一下这个增删查改，这个练习做的是员工的资料信息管理，我们主要要做的是实现员工资料的查询、新增、修改、删除功能，说到查询、新增、修改、删除这些我相信大家并不陌生了。这些在上课的教学内容也敲了不少了，但是这次有点不一样，之前都是对着教学内容来敲的，这次是要自己去做，在老师是发下来的文件里有一个数据库，一张图片和一篇文档，项目的数据库是已经做好的了，不需要再去我们设计的，我们直接附加使用就可以了，图片是这个模块的关系图的截图，文档就是一些要求，这要求的内容是这样的，要求：实现表格数据初始化，添加多条件查询的功能，查询条件为：编号/姓名(输入框)，部门(下拉框)、职位（下拉框）还有这些功能的图片，看这些功能的样式，让我们做一个和这个相似的出来。打开文档看完后一脸蒙圈完全不知道怎么下手，不知道从哪里下手好。恰好这里的内容和我们学习里内容有一个模块是非常相似的，只好看着那个模块的代码一步一步来，在这个过程中遇到了很多问题，也出现了很多错误

在这里就总结一下新增部分的内容吧

新增员工信息

首先新增之前先把表单重置一下，确保表单是一个空的表单，预防一打开就有数据了，重置后就是绑定下拉款的数据了，这里只有两个下拉框，一个是部门下拉框一个是职位下拉框，把控制查询到数据封装成一个方法（selectDepartment）传回到页面，页面接就收到这个方法（selectDepartment）下拉框的数据就绑定了，数据绑定了就弹出新增的模态框（页面代码如下，源于老师）

//重置表单

$("#formInsertEmployee").resetForm();

//部门下拉框数据的绑定

createSelect("IsDepartment", "/EPYManageInfor/selectDepartment");

//职位下拉框数据的绑定

createSelect("IsPosition", "/EPYManageInfor/selectPosition");

//弹出新增模态框

扫描二维码关注公众号，回复： 6032957 查看本文章

$("#modalInsertEmployee").modal('show');

接下要做的是就是保存新增了

首先就是获取到页面的数据。这里有一点是要注意的，就是名称问题，这里名称要和数据的字段是一致。否则保存不到到数据库，数据异常

//获取页面数据

Var employeeNumber = $("#formInsertEmployee [name='EmployeeNumber']").val()//编号

var employeeName = $("#formInsertEmployee [name='EmployeeName']").val();//姓名

var phone = $("#formInsertEmployee [name='Phone']").val();//电话

var cellphone = $("#formInsertEmployee [name='Cellphone']").val();//手机号

var departmentId = $("#formInsertEmployee [name='DepartmentID']").val();//部门ID

var positionId = $("#formInsertEmployee [name='PositionID']").val();//职位ID

var address = $("#formInsertEmployee [name='Address']").val();//地址

var remark = $("#formInsertEmployee [name='Remark']").val();//备注

下一步就是信息的验证了，什么是信息验证呢？举个例子吧，就拿这里一个姓名验证来说吧，在姓名框里我要输入的只能是中文和英文，其它的数字和字符都不能输入，不让随便输入，要按正确的格式去输入，这就是信息验证，用到了我们刚新学不久的正则表达式，正则表达式：描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。

以下是验证姓名的例子（代码如下，），电话的验证和手机号的验证同样的方法，都是用正则表达来匹配需要的结果

//姓名信息验证（不能是数字）

var EmployeeName1 = /^[A-Za-z\u4e00-\u9fa5]{2,}$/;

if (!EmployeeName1.test(employeeName)) {

layer.alert("姓名信息有误，姓名不能是数字或符号", { icon: 0, title: "提示", skin: "layui-layer-molv" });

return;

}

还有一个关卡验证数据完整性验证

if (departmentId > 0 && positionId > 0 && employeeNumber != "" && employeeName != "" && phone != "" && cellphone != "")

这个验证是填表单的时候那些数据是要填不可以留空白，通过这样验证去提醒用户填写这些数据，上面这就句这样子的，部门和职位的下拉框内容都对应有相应的ID，如果id是大于0表示是选择到的，如果id小于0表示没有选择到的，这时要返回一个信息弹窗提示用户填写完整信息，员工编号、姓名、电话、手机号不能为空，反之同样返回一个信息弹窗提示用户填写完整信息。验证都完成了最后一步就提交表单了

提交表单

我们这用了一个ajaxSubmit，ajaxSubmit()提交表单:我们直接通过form提交的话,提交后当前页面跳转到form的action所指向的页面。然而，很多时候我们并不希望提交表单后页面跳转，那么，我们就可以使用ajaxSubmit(obj)来提交数据。ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法，所以使用此方法需要先引入这个插件

$("#formInsertEmployee").ajaxSubmit(function (returnJson)

最后html这个一点记得要要加上，这个错让找了好久。就是这里的路径没有加上，浪费了很多时间

基础增删查改练习—新增

猜你喜欢