1. 程式人生 > >bootstraptable自定義編輯

bootstraptable自定義編輯

columns:[
{
			title: '編輯',
			field: 'edit',
			align: 'center',
			valign: 'middle',
			sortable: true,
			events:editEvents,
			formatter:editFormatter
		},
...
]

定義編輯按鈕:

function editFormatter(value,row,index){
		return [
			'<button class="btn btn-primary" id="edit_btn">編輯</button>'
		].join("");
	}

點選編輯按鈕開啟的模態框:

<!--編輯節點-->
		<div class="modal fade" id="editWin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
						<h4 class="modal-title" id="myModalLabel">
							編輯
						</h4>
					</div>
					<div class="modal-body">
						<div class="form-horizontal">
							<div class="form-group">
								<label class="col-sm-3 control-label">分類</label>
								<div class="col-sm-7">
									<input type="text" id="category" class="form-control" placeholder="分類" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">分類來源</label>
								<div class="col-sm-7">
									<select class="form-control selectpicker" id="categorySource">
										<option value="001">111</option>
										<option value="002">222</option>
										<option value="003">333</option>
									</select>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
        				<button type="button" class="btn btn-primary" id="saveEditBtn">儲存</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>

點選編輯開啟模態框和儲存事件:

window.editEvents={
	"click #edit_btn":function(e,value,row,index){
		$("#category").val('');//開啟模態框前清除之前存在的值
		$("#category").val(row.codename);	
		$("#categorySource option:first").prop("selected", 'selected');//預設選中的值為第一個
		$("#editWin").modal("show");//開啟模態框	
		$("#saveEditBtn").unbind('click');//點選儲存前清除之前的點選事件,否則會把之前點選編輯但沒有儲存的行一起儲存
		$("#saveEditBtn").click(function(){
			var codename=$("#category").val();//獲取分類的值
			var targetcode=$("#categorySource").val();//獲取分類來源的值
			var targetname=$("#categorySource").find("option:selected").text();//獲取選中值的文字值
			$.ajax({
	          method:"post",
	          url:'update/updateinfo',
	          data:{
	          	codename:codename,
	          	id:row.id,
	          	targetcode:targetcode,
	          	targetname:targetname
	          },
	          dataType : "jsonp",
	          async:true,
	          success:function (res) {
	          	 $("#editWin").modal('hide'); //隱藏模態框
	          	 $("#table").bootstrapTable('refresh');//儲存成功後重新整理表格
	          }
	        }); 
		});
		
	}
}