bootstrap-table修改行資料
阿新 • • 發佈:2018-12-22
利用bootstrap的模態框元件,還需要http://www.cnblogs.com/lyzg/p/5229217.html部落格中的dialog.js,
定義一個編輯按鈕,並繫結點選事件
<button id="btn_edit2" type="button" class="btn btn-default pull-right">
<img src="images/edit.png" alt="edit"/> 編輯
</button>
<script type="text/html" id="edit_wcss_modal"> <form class="model_row"> <div class="row"> <div class="form-group col-md-6 col-sm-6"> <label for="seq_no" class="col-md-5 col-sm-5 control-label">編號</label> <div class="input-group col-md-7 col-sm-7"> <input class="form-control inputcls input-group" size="16" type="text" value="" id="seq_no" name="seq_no"> </div> </div> <div class="form-group col-md-6 col-sm-6"> <label for="dev_type2" class="col-md-5 col-sm-5 control-label">裝置型別</label> <div class="input-group col-md-7 col-sm-7"> <input class="form-control inputcls" size="16" type="text" value="" id="dev_type2" name="dev_type2"> </div> </div> </div> <div class="row"> <div class="form-group col-md-6 col-sm-6"> <label for="dev_pos1" class="col-md-5 col-sm-5 control-label">位置</label> <div class="input-group col-md-7 col-sm-7"> <input class="form-control inputcls" size="16" type="text" value="" id="dev_pos1" name="dev_pos1"> </div> </div> <div class="form-group col-md-6 col-sm-6"> <label for="dev_status" class="col-md-5 col-sm-5 control-label">狀態</label> <div class="input-group col-md-7 col-sm-7"> <input class="form-control inputcls" size="16" type="text" value="" id="dev_status" name="dev_status"> </div> </div> </div> <div class="row"> <div class="form-group col-md-6 col-sm-6"> <label for="fault" class="col-md-5 col-sm-5 control-label">故障現象</label> <div class="input-group col-md-7 col-sm-7"> <input class="form-control inputcls" size="16" type="text" value="" id="fault" name="fault"> </div> </div> <div class="form-group col-md-6 col-sm-6"> <label for="fault_cause" class="col-md-5 col-sm-5 control-label">故障原因</label> <div class="input-group col-md-7 col-sm-7"> <input class="form-control inputcls" size="16" type="text" value="" id="fault_cause" name="fault_cause"> </div> </div> </div> <div class="row"> <div class="form-group col-md-6 col-sm-6"> <label for="purchase_time" class="col-md-5 col-sm-5 control-label">採購時間</label> <div class="input-group col-md-7 col-sm-7"> <input class="form-control inputcls" size="16" type="text" value="" id="purchase_time" name="purchase_time"> </div> </div> <div class="form-group col-md-6 col-sm-6"> <label for="quality_time" class="col-md-5 col-sm-5 control-label">質保時間</label> <div class="input-group col-md-7 col-sm-7"> <input class="form-control inputcls" size="16" type="text" value="" id="quality_time" name="quality_time"> </div> </div> </div> <div class="row"> <div class="form-group col-md-6 col-sm-6"> <label for="maintain_time" class="col-md-5 col-sm-5 control-label">維護時間</label> <div class="input-group col-md-7 col-sm-7"> <input class="form-control inputcls" size="16" type="text" value="" id="maintain_time" name="maintain_time"> </div> </div> <div class="form-group col-md-6 col-sm-6"> <label for="maintain_unit" class="col-md-5 col-sm-5 control-label">維護單位</label> <div class="input-group col-md-7 col-sm-7"> <input class="form-control inputcls" size="16" type="text" value="" id="maintain_unit" name="maintain_unit"> </div> </div> </div> <div class="row"> <div class="form-group col-md-6 col-sm-6"> <label for="inputer" class="col-md-5 col-sm-5 control-label">錄入者</label> <div class="input-group col-md-7 col-sm-7"> <input class="form-control inputcls" size="16" type="text" value="" id="inputer" name="inputer"> </div> </div> </div> </form> </script>
$("#btn_edit1").click(function() { edit1(); }); function edit1() { var ids = $.map($table.bootstrapTable('getSelections'), function(row) { return row.id; }); if(ids == "") Alert('<h4 style="color:red;text-align:center;">請選取您要編輯的資料!</h4>'); else { $.map($table.bootstrapTable('getSelections'), function(row) { //for(var i in row) console.log(i) editWcssModal.open(); $("#dev_id").val(row.id); $("#seq_no").val(row.seq_no); $("#dev_pos1").val(row.position); $("#dev_type2").val(row.type); $("#dev_status").val(row.status); $("#fault").val(row.fault); $("#fault_cause").val(row.fault_cause); $("#purchase_time").val(row.purchase_time); $("#quality_time").val(row.quality_time); $("#maintain_time").val(row.maintain_time); $("#inputer").val(row.inputer); $("#maintain_unit").val(row.maintain_unit); }); } } var editWcssModal = new Modal({ title: '設施資訊', content: $('#edit_wcss_modal').html(), width: 700, onOk: function() { var $form = this.$modal.find('form'); var data = $form.serializeArray(); //form中的輸入框須有name屬性,否則取不到資料。 console.log($form); var postData = {}; data.forEach(function(obj) { postData[obj.name] = obj.value; }); console.log(postData['seq_no']); if(postData) { _post(); } function _post() { //非同步任務 var ids = $.map($table.bootstrapTable('getSelections'), function(row) { return row.id; }); $table.bootstrapTable('updateByUniqueId', { id: ids, row: { id: ids, seq_no: postData['seq_no'], position: postData['dev_pos1'], type: postData['dev_type2'], status: postData['dev_status'], fault: postData['fault'], purchase_time: postData['purchase_time'], quality_time: postData['quality_time'], maintain_unit: postData['maintain_unit'], inputer: postData['inputer'], } }); } }, });