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');//保存成功后刷新表格
	          }
	        }); 
		});
		
	}
}

猜你喜欢

转载自blog.csdn.net/LLL_liuhui/article/details/81867470
今日推荐