使用同一个模态框进行新增和修改
表单开发时一般会有一个新增的模态框，和一个修改的模态框，大多数情况下这两个框是一模一样的，
分析其不同点有如下几个：
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"> × </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是否存在值判断调哪个接口，
如果不存在，则说明是新增数据，则调用新增接口，
如果存在，则说明是修改数据，调用修改接口
