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