bootstraptable自定义编辑

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

定义编辑按钮:

function editFormatter(value,row,index){
		return [
			''
		].join("");
	}

点击编辑按钮打开的模态框:


		

点击编辑打开模态框和保存事件:

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

 

你可能感兴趣的:(js,bootstrap)