bootstrap table updateRow更新一行数据的方法

通过bootstrap table updateRow方法更新行数据，使用场景通常是选中一行弹出窗，在窗口表单修改完数据后，使用updateRow更新bootstrap table选中行的数据，需要注replace参数的用法。

updateRow方法

参数名称	参数说明
index	需要更新的数据索引，从0开始
row	新的行数据对象，比如{id:1,name:"丽莎"}
replace	可选项，新的数据对象是否替换旧的对象，设置true直接替换，设置false合并对象，默认为false

关于replace参数说明：英文不好的同学看官方文档很难理解这个参数的作用，其实replace参数还是很好理解的。
旧的行数据对象如下：
var oldRow={id:100,name:"itxst.com"};
新的的行数据对象如下：
var newRow={id:101};
如果设置replace为true那么更新后的行数据对象如下
{id:101}; //看明白了没 oldRow对象被完全替换
如果设置replace为false那么更新后的行数据对象如下
{id:101,name:"itxst.com"};
其实就是
oldRow=newRow;
或者
$.extend(oldRow, newRow);

代码例子

 //更新第一行数(合并替换行数据，replace默认为false)
 $('#table').bootstrapTable('updateRow', {
        index: 0, 
        row: {
          Id: 100,
        }
   }); 
   
 //替换第一行数(replace为true)
 $('#table').bootstrapTable('updateRow', {
        index: 0, 
        replace:true,
        row: {
          Id: 100,
        }
   });

在线试一试

完整例子

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://www.itxst.com/package/jquery-3.3.1/jquery.js"></script>
    <link href="https://www.itxst.com/package/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
    <link href="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.css" rel="stylesheet" />
    <script src="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.js"></script> 
    <title>bootstrap table updateRow在线例子</title>
    <style>
        .table-demo {
            width: 80%;
            margin: 30px auto 0px auto;
        }
      .titles {
  float: right;
  clear: both;
}
    </style>
</head>
<body>
  <div id="toolbar">
    <button onclick="update(false)">更新第1行数据 false</button> 
    <button onclick="update(true)">更新第1行数据参数replace为true</button> 
    <button onclick="getSel()">获取选中行数据</button> 
  </div>
    <div class="table-demo">
        <table id="table"  ></table>
    </div>
    <script>
        //设置需要显示的列
        var columns = [
        { 
          checkbox:true
        },
        { 
           field:"Id",  
          title: 'ID'
        }, {
            field: 'catalog',
            title: '分类'
        } ];
      var data= [{
            Id: 11,
            catalog: 'catalog 001', 
        }, {
            Id: 12,
            catalog: 'catalog 002', 
        }, {
            Id: 13,
            catalog: 'catalog 003', 
      } ];
        
      //bootstrap table初始化数据
      $('#table').bootstrapTable({  
            toolbar:"#toolbar",  
            data:data,
            columns: columns,  
        });
      
     function update(replace)
     {
     
      $('#table').bootstrapTable('updateRow', {
        index: 0,
        replace:replace,
        row: {
          Id: 100,
        }
       }); 
     }
  
     function getSel()
     {
      var rows=$('#table').bootstrapTable('getSelections'); 
      alert(JSON.stringify(rows));
     }
    </script>
</body>
</html>