共用模态框

开发工具与关键技术：VS JavaScript
作者：LJR
撰写时间：2019年 7 月 24 日

1. 在写HTML的代码的时候，如果遇到模态框的代码的时候，新增一个模态框，修改有一个模态框，写两个模态框，如果两个模态框的内容不多，代码还是挺容易写的，但是如果遇到两个非常多数据的模态框时，代码量是非常大的，这个时候，我们可以想象可不可以新增和修改，共用一个模态框呢？答案是可以。
2. 在写好一个模态框的时候，在JavaScript声明一个全局的变量：blInsert = true，判断用户点击的是新增按钮，还是修改的按钮。
   3.在点击新增按钮弹出模态框的时候：

     function openModal() {
        blInsert = true;//新增操作
        $("#formEmployee input[type='reset']").click();//重置表单
        $("#modalEmployee .modal-header h6").text("新增员工信息");//模态窗体的标题文字
        $("#modalEmployee").modal(); //弹出模态窗体
        }

先把全局变量利用进来，让它还是等于true，然后重置表单，改变模态框的标题，最后再打开模态框。
4. 那么在打开修改模态框的时候：

function openUpdate(a) {
            blInsert = false;//修改操作
            $("#formEmployee input[type='reset']").click();//重置表单
            $("#modalEmployee .modal-header h6").text("修改员工信息");//模态窗体的标题文字
            $("#modalEmployee").modal(); //弹出模态窗体
            //模态窗体中数据回填
            $.getJSON("控制器链接？A=" + a, function (data) {
             //回填数据
            });
        }

这里是先利用全局变量，让它等于false，然后重置表单，改变模态框的标题，接着就是按需求去回填数据，最后再打开模态框。
5. 既然模态框打开的是一个模态框，那么在写保存的时候，就有人会问到，只有一个保存按钮，怎么保存新增和修改两个方法的数据。
其实在写保存的时候，只要把保存写到一个方法里面就可以了。

function savaInfor(){
            var employeeNum = $("#employeeNum").val();
            var employeeName = $("#employeeName").val();
            var telphone = $("#telphone").val();
            var address = $("#address").val();
            if (employeeName != "") {
                if (blInsert) { 
                    var dataform = $("#formEmployee").serializeArray();
                    $.post("控制器的链接", dataform,//新增传递的参数
                      function (msg) { 
$("#modalEmployee").modal("hide");
                         //关闭模态框，刷新表格
                             if (msg.State) {
                              layer.alert(msg.Text, { icon: 1, offset: '150px', skin: 'layui-layer-molv', closeBtn: 0 });//弹出提示框
                              //表格重载 
                              tabemployee = layuiTable.reload('employee');
                      }
                  );
                } else {
                    var dataform = $("#formEmployee").serializeArray();
                    $.post("控制器的链接", dataform, 
                      function (msg) {
                             //关闭模态框，提示，刷新表格
                      }
                  );
                }
            } else {
                layer.alert("请将数据填写完整！", { icon: 5, offset: '150px' });
            }
        }

在这个方法里面，跟平常的新增方法有点不一样。这次多了一个if判断，这个if判读就是判断它是新增还是修改的操作的，如果判断到blInsert是等于true的，就说明是执行新增的操作。否则就是执行的是修改的。
这样一个新增和修改共用模态框的方法就做出来了。