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