使用同一个模态框进行新增和修改

表单开发时一般会有一个新增的模态框，和一个修改的模态框，大多数情况下这两个框是一模一样的，

分析其不同点有如下几个：

1、新增与修改的模态框标题不同；

2、在修改时需要回填数据，新增时不需要；

3、新增时提交调用新增接口，修改时提交调用修改接口；

需要使用同一个模态框完成需求，就需要解决如上3个问题。

前端代码如下：

<!-- 新增按钮触发模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="addData()">新增项目</button>

<div>
    <!-- 新增和修改共用一个模态框（Modal） -->
    <form id="add-project-form" class="form-horizontal" role="form">
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            新增项目
                        </h4>
                    </div>
                    {# 模态框body #}
                    <div class="modal-body" style="height: 100%;">
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">项目名称</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" id="project_name" name="project_name" required
                                       placeholder="请输入项目名">
                                <input type="hidden" class="form-control" id="project_id">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">负责人</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" id="project_manager" name="project_manager"
                                       required
                                       placeholder="请输入负责人">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">业务部门</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" id="project_line" name="project_line"
                                       placeholder="请输入业务部门">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">项目描述</label>
                            <div class="col-sm-7">
                                <textarea type="text" class="form-control" id="desc" name="desc" maxlength="50"
                                          width="318.83"
                                          placeholder="请输入项目描述">
                                </textarea>
                            </div>
                        </div>
                    </div>
                    {# 模态框底部 #}
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input type="button" onclick="add_or_update_project()" class="btn btn-primary" value="提交"/>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </form>
</div>

// getData方法获取全部页面数据后，将data转为json对象，使用index当前行号作为下标获取对应数据
    function EditViewById(row, index) {

        let project_info_data = $("#mytab").bootstrapTable('getData')[index]; //获取该行数据
        if (project_info_data.id !== null)
            {# 修改modal框的标题 #}
            $('.modal-title').text('修改项目')
        $('#myModal').modal('show')


        $("#project_name").val(project_info_data.project_name);
        $("#project_id").val(project_info_data.id);
        $("#project_manager").val(project_info_data.project_manager);
        $("#project_line").val(project_info_data.project_line);
        $("#desc").val(project_info_data.desc);

        {# 同样弹出模态框 #}
        $('#myModal').modal('show')
    };

    // 新增时重置表单并修改模态框标题
    function addData() {
        $('.modal-title').text("新增项目")
        $('#add-project-form')[0].reset()  //重置表单
    }

    {# 新增或者修改后提交 #}
    function add_or_update_project() {
        let project_id = $('#project_id').val();
        console.log("project_id的值为：" + project_id)
        {# 如果不存在project_id就是新增 #}
        if (!project_id) {
            $.ajax({
                type: "POST",
                url: "projects",
                dataType: "json",
                data: $('#add-project-form').serialize(),
                success: function (res_data) {
                    console.log(res_data)
                    {#关闭模态框并清除框内数据，否则下次打开还是上次的数据#}
                    $("#add-project-form")[0].reset();
                    $('#myModal').modal('hide');
                    $("#mytab").bootstrapTable('refresh');
                }
            })
        }
        {# 如果project_id存在就是修改 #}
        else {
            $.ajax({
                type: "PUT",
                dataType: "json",
                url: "update_projects/" + project_id, // 待后端提供PUT修改接口
                data: $('#add-project-form').serialize(),

                success: function (data) {
                    console.log(data);
                    if (data.code == 200) {
                        toastr.success("修改成功");
                        $("#add-project-form")[0].reset();
                        $('#project_id').val("")
                        $('#myModal').modal('hide');
                        $("#mytab").bootstrapTable('refresh');
                    }
                    else {
                        toastr.warning('请填写所有数据');
                    }
                },
                error: function () {
                    toastr.warning("修改失败");
                }
            })
        }
    }

首先增加一个隐藏的input框，type=“hidden”，前端不可见，

当单击新增按钮时，打开模态框，因为可能在修改后该模态框标题会修改，且input有内容，

所以先修改模态框标题，并清空input内容

 // 新增时重置表单并修改模态框标题
    function addData() {
        $('.modal-title').text("新增项目")
        $('#add-project-form')[0].reset()  //重置表单
    }

如果是单击修改按钮，调用EditViewById方法，获取要修改的数据，并修改modal-title为“修改项目”，然后回填数据

    // getData方法获取全部页面数据后，将data转为json对象，使用index当前行号作为下标获取对应数据
    function EditViewById(row, index) {

        let project_info_data = $("#mytab").bootstrapTable('getData')[index]; //获取该行数据
        if (project_info_data.id !== null) {
            {# 修改modal框的标题 #}
            $('.modal-title').text('修改项目')
        }
        $('#myModal').modal('show')
        // 回填数据，记得回填隐藏的input框的value值为要修改的数据的id主键值
        $("#project_name").val(project_info_data.project_name);
        $("#project_id").val(project_info_data.id);
        $("#project_manager").val(project_info_data.project_manager);
        $("#project_line").val(project_info_data.project_line);
        $("#desc").val(project_info_data.desc);
    };

关键的是提交（调用add_or_update_project()方法），根据project_id是否存在值判断调哪个接口，

如果不存在，则说明是新增数据，则调用新增接口，

如果存在，则说明是修改数据，调用修改接口