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