新增修改共用一个模态框

撰写日期：2019.5.3

在之前我们在做新增、修改的时候我们要写两个模态框，代码太多了，新增要写一个模态框，修改他还要一个模态框，不但模态框要写两个，而且保存数据的代码也要写两份，所有我们还合起来，新增和修改共用一个模态框。

这样代码少写起来也轻松。

在写代码之前你要知道，新增数据和修改数据真正的区别在哪里。

新增的模态框它的from

在做这个表格的新增数据时，我们form表单的代码会出现下面这几input。

//员工编号

<input type="text" class="form-control" name="employeeNum" id="employeeNum" />

//员工姓名

<input type="text" class="form-control" name="employeeName" id="employeeName" />

//联系电话

<input type="text" class="form-control" name="telphone" id="telphone" />

//家庭地址

<input type="text" class="form-control" name="address" id="address" />

但是修改模态框还会对出一个input，

//员工ID

<input type="hidden" id="employeeID" name="employeeID" />

为什么这样呢，是因为我们在做修改时，要修改对应的数据和把数据回填到页面上，所有会出现这个name值为员工ID的input。也就是说我们只要判断一下带有员工ID的input，判断它是否有值，有值就是修改，没有值就是新增。

还有一个区别就是模态框名称不同，所有在打开模态框时，要对模态框进行一个设置。

到了这里，我们知道了他们新增、修改数据的区别了。

那下面我们就来看代码：

//刷新表格的方法         function reloadtabemployee() {             layuiTable.reload('employee')         } //新增按钮点击事件         $("#insertEmployee").click(function () {             //重置表单             $("#formEmployee input[type='reset']").click();             //弹出模态框             $("#modalEmployee").modal('show');             $("#biaoti").text("新增员工");//设置模态框的名称         });           //修改按钮点击事件         function openUpdate(employeeID) {             //重置表单             $("#formEmployee input[type='reset']").click();             //回填数据             $.post("SelectEmployeeByID", { employeeID: employeeID }, function (data) {                 loadDatatoForm("formEmployee", data);             });             //弹出模态框             $("#modalEmployee").modal('show');             $("#biaoti").text("修改员工");//设置模态框的名称         }           //新增/修改的保存按钮         $("#baocun").click(function () {             var employeeNum = $("#employeeNum").val();//编号             var employeeName = $("#employeeName").val();//姓名             var telphone = $("#telphone").val();//联系电话             var address = $("#address").val();//地址               var employeeID = $("#employeeID").val();             if (employeeNum != "" && employeeName != "" && telphone != "" && address != "") {                 var url = "";                 if(employeeID==""){//为新增                     url = "InsertEmployee";//新增的URL                 }                 else {//为修改                     url = "UpEmployee";//修改的URL                 }                   //序列化表单:(这里因为没办法确定参数的个数，                 //所有用序列化表单，可以根据name的个数来决定参数的个数) var formDate = $("#formEmployee").serializeArray();                   $.post(url, formDate, function (returnJson) {                     if (returnJson.State==true) {                         //关闭模态框                         $("#modalEmployee").modal('hide');                     }                     else {                         $("#modalEmployee").modal('hide');                     }                     layer.alert(returnJson.Text, { icon: 1, title: '提示' });                     //刷新表格                     reloadtabemployee();                 });             }             else {                 layer.msg("请填写完整！");             }         });

上面所述就是修改、新增共用一个模态框的代码和我的一些总结。

有什么不当的地方，请大家提出来，我好进行改正。