找了半天,终于还是不会被清空了,网上搜出来是下面这样例子,实验后发现表格值是更新进去了,但是页面输入值被清空了。
改进后如下:
1.页面 .bootstrapTable
columns: [{
....,
{
field: 'remarks',
title: '备注',
sortable: true,
sortName: 'remarks',
formatter:formInput
}
2.js方法
// 拼接input receiveCount字段前端添加的,一定要有value,否则updateRow数据页面上会被清空
function formInput(value, row, index) {
return '<input type="text" autocomplete="off" name="remarks" onblur="changeData(' + index + ',this);" placeholder="可编辑数量" value="'
+ (function () {
return !row.remarks ? '' : row.remarks
})()
+ '">'
}
function changeData(index, obj) {
var value = $(obj).val();
var name = $(obj).attr('name');
//通过 index 获取指定的行
var row = $('#deviceStateOrderDetail').bootstrapTable('getRowByIndex',index);//行的数据
//将 input 的值存进 row 中
row[name] = value;
console.log(row);
//更新指定的行,调用 'updateRow' 则会将 row 数据更新到 data 中,然后再重新加载
$("#deviceStateOrderDetail").bootstrapTable('updateRow',{index: index, row: row});
}
3.大功告成