使用同一個模態框進行新增和修改
阿新 • • 發佈：2020-12-22
表單開發時一般會有一個新增的模態框，和一個修改的模態框，大多數情況下這兩個框是一模一樣的，
分析其不同點有如下幾個：
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是否存在值判斷調哪個介面，
如果不存在，則說明是新增資料，則呼叫新增介面，
如果存在，則說明是修改資料，呼叫修改介面