模态窗体

                                                                                  共用模态窗体的方法

       在做项目的时候，模态窗体是最常用的。有了它，就可以实现新增和修改这一类的功能。那么在反反复复的重复写着差不多相同的代码中，你是否感觉这简直就是在浪费时间呢？明明就是同样的东西，就因为换了个名称，多加了个按钮就得重新再写，这也太难受了吧！是不是有办法可以节省代码，让更少的代码实现更多的功能？没错，这个办法就是让同样的弹出框共用一个模态窗体，让更少的代码实现更多的功能。

       一般的，我们写新增和修改的模态窗体是分开写的，这样写不利于提高工作效率。既然是实现同样的功能，就直接共用一个窗体就行了，代码如下：

<!--新增/修改模态窗体-->

    <div class="modal fade" id="modalEmployee">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header" id="xzxg">

                    模态框标题

                    <button type="button" class="close" data-dismiss="modal">

                        <span aria-hidden="true">&times;</span>

                    </button>

                </div>

                <div class="modal-body">

                    <form id="formEmployee" class="form-horizontal" method="post" action="">

                        <!--重置表单-->

                        <input type="reset" hidden />

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

                        <div class="form-group form-row">

                            <label class="col-form-label col-3" for="employeeNum">员工编号：</label>

                            <div class="col-9">

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

                            </div>

                        </div>

                        <div class="form-group form-row">

                            <label class="col-form-label col-3" for="employeeName">员工姓名：</label>

                            <div class="col-9">

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

                            </div>

                        </div>

                        <div class="form-group form-row">

                            <label class="col-form-label col-3" for="telphone">联系电话：</label>

                            <div class="col-9">

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

                            </div>

                        </div>

                        <div class="form-group form-row">

                            <label class="col-form-label col-3" for="address">家庭地址：</label>

                            <div class="col-9">

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

                            </div>

                        </div>

                        <div class="form-group form-row justify-content-center">

                            <div class="col-4">

                                <button type="button" class="btn btn-outline-success mr-3" id="SaveEmployee">保存</button>

                                <button type="button" class="btn btn-outline-secondary " data-dismiss="modal">关闭</button>

                            </div>

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </div>

       因为这两个模态框的功能基本上是一样的，所以共用一个窗体的样式是完全没有问题的。唯一不同的就是新增需要的是重置表单，修改需要的是回填表单的功能。为了区分模态框，还要给不同的模态框设置标题，代码如下：

//打开新增模态框

        function openInsert(employeeId) {

            //重置表单

            $("#formEmployee")[0].reset();

            //设置模态框标题

            $("#xzxg").text("新增员工信息");

            //设置表单的action

            $("#formEmployee").prop("action", "/Main/InsertEmployee");

            //弹出模态框

            $("#modalEmployee").modal({ backdrop: 'static', keyboard: false });

        };

 

    //打开修改的模态框

        function updateEmployee(employeeId) {

            //重置表单

            $("#formEmployee")[0].reset();

            //设置模态框标题

            $("#xzxg").text("修改员工信息");

            //设置表单的action

            $("#formEmployee").prop("action", "/Main/UpdateEmployee")

            //回填表单

            $.post("/Main/HuitianUpdate",

               { EmployeeId: employeeId },

               function (jsonData) {

                   loadDatatoForm("formEmployee", jsonData);

               }, 'json');

            //弹出模态框

            $("#modalEmployee").modal({ backdrop: 'static', keyboard: false })

        };

       最后看一下效果：