bootstrap table 获取数据里面的id可以重新请求数据展

项目中使用BootStrap editTable 进行行内编辑，编辑后并不实时的修改某列的值，而是在所有需要修改的列修改后，点击后面的【确认投资】按钮，一次性保存所修改的列。

由于【确认投资】是页面第一次初始化后出现的，而这时需要修改的列是没有值的，对列进行编辑后，点击按钮是不能获取到编辑后的值。

经过学习Bootstrap editTable  和 bootstarp table的API,找到了解决方案。

方法/步骤

• 1

  引入bootstarp edittable 的 js，css 文件：

  注意：bootstrap-table-editable.js  不属于 bootstrap3-editable 里面，是第三方或个人扩展的，可以从网上下载。

• 2

  特定的列进行行内编辑：

  field: 'autualFinanceAmount',

  title: '实际融资金额（万元）',

  width: 160,

  align: 'center',

  formatter:function(value,row,index){

  if(value == null || value == ''){

  return "-";

  }

  return value;

  },

  editable: {

  type: 'text',

  title: '实际融资金额',

  validate: function (v) {

  if (!v) return '实际融资金额不能为空';

  //正则校验输入格式：最多两位小数。

  var patrn=/^([1-9]\d*\.\d{1,2}|0\.\d[1-9]|[1-9]\d*)$/;

  if(!patrn.test(v)){

  return '输入格式：最多两位小数';

  }

  }

  }

• 3

  当某列编辑完成后，需要对当前列所在的行进行修改操作：

  $("#grid").bootstrapTable({

  url:'',

  ……

  …… //其他属性

  columns:[{

  field:'rowId',

  title:'序号',

  width:30,

  align: 'center',

  formatter:function(value,row,index){

  row.rowId = index;

  return index+1;

  }

  …… //其他列

  }],

  onEditableSave: function (field, row, oldValue, $el) {

  $table = $('#grid').bootstrapTable({});

  $table.bootstrapTable('updateRow', {index: row.rowId, row: row});

  }

  注意：黑色粗体字就是新增的代码，表示在列编辑完成后，对当前列所在的行进行修改。

  index 表示该行所在的索引。由于onEditableSave函数的参数中没有index，只能自己特殊处理了。看到在columns属性中，有一个field:'rowId’就是自己处理的，rowId赋给row。

• 4

  如果你的列中有

  formatter:function(value,row,index){} 函数，

  在onEditableSave 方法执行完成后，该函数会重新执行，这样就会把修改后的列的值重新拿到进行处理。