bootstrapTable输入数据updateRow防止输入被

bootstrapTable动态输入数据并更新行数据updateRow
需求如图所示

之前写的时候，使用 updateRow 方法更新数据，数据倒是被更新了，但页面上被清掉了。
关键一点：value值！需要给输入框默认一个value=" "输入后updateRow，value被更换为更新的字段值
第二个 table 领用数量这个字段是前端自定义的非列表接口返回 receiveCount

主要几个方法：

// 添加数据到某个列表
$('#selectDataTable').bootstrapTable('append', row);
// 更新指定行数据
$("#selectDataTable").bootstrapTable('updateRow', { index: index, row: row });
// 获取表格选中的数据
$('#selectDataTable').bootstrapTable('getData')
// 移除某行数据
$('#selectDataTable').bootstrapTable('remove', {
   field: 'suppliesId',
   values: [row.suppliesId]
});

业务具体实现代码如下：

// table 列初始化
suppliesReceive.initColumn = function () {
  return [
    { field: 'selectItem', chechbox: true, visible: false },
    { title: '主键', field: 'suppliesId', visible: false, align: 'center', valign: 'middle' },
    { title: '物资名称', field: 'suppliesName', visible: true, align: 'center', valign: 'middle' },
    { title: '物资分类', field: 'suppliesTypeName', visible: true, align: 'center', valign: 'middle' },
    { title: '所属仓库', field: 'depotName', visible: true, align: 'center', valign: 'middle' },
    { title: '可用数量', field: 'usableCount', visible: true, align: 'center', valign: 'middle' },
    { title: '操作', width: '200px', visible: true, align: 'center', valign: 'middle', formatter: formatAdd }
  ];
}

// 拼接添加按钮
function formatAdd(value, row, index) {
  var html = ''
  html += '<button type="button" style="height:25px;line-height:0" class="btn btn-primary btn-sm"'
  html += 'onclick="suppliesReceive.add(' + JSON.stringify(row).replace(/\"/g, "'") + ')">'
  html += '<i class="fa fa-plus"></i>&nbsp;添加'
  html += '</button>'
  return html
}

// 添加物资到 已选表格
suppliesReceive.add = function (row) {
  var suppliesList = suppliesReceive.getAllSelection()
  var flag = false
  if (suppliesList.length > 0) {
    suppliesList.forEach(function (item, index) {
      if (item.suppliesId == row.suppliesId) {
        flag = true
      }
    })
    if (flag) return Feng.info('此物资已放置选项中')
  }
  $('#selectDataTable').bootstrapTable('append', row);
}

// 初始化 已选物品表格
suppliesReceive.initReceive = function () {
  $('#selectDataTable').bootstrapTable({
    columns: [
      { field: 'suppliesId', title: '主键', visible: false, align: 'center', valign: 'middle' },
      { title: '物资名称', field: 'suppliesName', visible: true, align: 'center', valign: 'middle' },
      { title: '物资分类', field: 'suppliesTypeName', visible: true, align: 'center', valign: 'middle' },
      { title: '所属仓库', field: 'depotName', visible: true, align: 'center', valign: 'middle' },
      { title: '可用数量', field: 'usableCount', visible: true, align: 'center', valign: 'middle' },
      { title: '领用数量', field: 'receiveCount', width: '200px', align: 'center', valign: 'middle', formatter: formInput },
      { title: '操作', width: '200px', align: 'center', valign: 'middle', formatter: formBtn }
    ],
    striped: true,
    data: []
  })
}

// 拼接input receiveCount字段前端添加的，一定要有value，否则updateRow数据页面上会被清空
function formInput(value, row, index) {
  return '<input type="text" onkeyup="validNum(event)" autocomplete="off" name="receiveCount" onblur="changeData(' + index + ',' + row.usableCount + ', this);" placeholder="可编辑数量" value="'
  + (function () {
    return !row.receiveCount ? '' : row.receiveCount
  })()
  + '">'
}

// 只可输入0和正整数
function validNum(ev) {
  ev.target.value = (ev.target.value.replace(/\D/g, '') == '' ? '' : parseInt(ev.target.value))
}

// 拼接移除按钮
function formBtn(value, row, index) {
  var html = ''
  html += '<button type="button" style="height:25px;line-height:0" class="layui-btn layui-btn-danger layui-btn-xs"'
  html += 'onclick="suppliesReceive.remove(' + JSON.stringify(row).replace(/\"/g, "'") + ')">'
  html += '<i class="fa fa-trash"></i>&nbsp;删除'
  html += '</button>'
  return html
}

// 将table中的input输入进去的值添加到row数据中
var rightFlag = true
function changeData(index, count, obj) {
  rightFlag = true
  var value = $(obj).val();
  var name = $(obj).attr('name');
  if (count < value) {
    $(obj).val("")
    Feng.error('领用数量不可大于可用数量！')
    rightFlag = false
    return
  }
  //通过 index 获取指定的行
  var row = $("#selectDataTable").bootstrapTable('getOptions').data[index];
  //将 input 的值存进 row 中
  row[name] = value;
  //更新指定的行，调用 'updateRow' 则会将 row 数据更新到 data 中，然后再重新加载
  $("#selectDataTable").bootstrapTable('updateRow', { index: index, row: row });
}

// 移除已选物品
suppliesReceive.remove = function (row) {
  $('#selectDataTable').bootstrapTable('remove', {
    field: 'suppliesId',
    values: [row.suppliesId]
  });
}

// 获取已选的表格中的所有数据
suppliesReceive.getAllSelection = function () {
  return $('#selectDataTable').bootstrapTable('getData')
}