bootstrap-table修改行数据

来源:互联网 发布:excel2003 重复数据 编辑:程序博客网 时间:2024/06/05 18:33

利用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'],}});}},});





原创粉丝点击