首页 > bootstrap table 方法 > bootstrap table updateByUniqueId根据唯一Id更新行数据的方法

bootstrap table updateByUniqueId根据唯一Id更新行数据的方法

通过bootstrap table updateByUniqueId方法更新行数据 ,根据唯一字段(主键字段)更新行数据,需要注replace参数的用法,注意不要忘记通过uniqueId属性设置唯一字段。

updateByUniqueId方法

参数名称参数说明
id唯一字段(主键字段)对应的值
row新的行数据对象,比如{id:1,name:"丽莎"}
replace可选项,新的数据对象是否替换旧的对象,设置true直接替换,设置false合并对象,默认为false

关于replace参数说明:英文不好的同学看官方文档不是很好理解。
旧的行数据对象如下:
var oldRow={id:100,name:"itxst.com"};
新的的行数据对象如下:
var newRow={id:101};
如果设置replace为true那么更新后的行数据对象如下
{id:101}; //看明白了没 oldRow对象被完全替换
如果设置replace为false那么更新后的行数据对象如下
{id:101,name:"itxst.com"};  

代码例子

  //设置Id字段为唯一字段
      $('#table').bootstrapTable({  
        toolbar:"#toolbar", 
        uniqueId:"Id",
        data:data,
        columns: columns,  
  });
 
 //更新第2行数(合并替换行数据,replace默认为false)
 $('#table').bootstrapTable('updateByUniqueId', {
        id: 1, 
        row: {
          Id: 100,
        }
   }); 
   
 //替换第2行数(replace为true)
 $('#table').bootstrapTable('updateByUniqueId', {
        id: 1, 
        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="http://www.itxst.com/package/jquery-3.3.1/jquery.js"></script>
    <link href="http://www.itxst.com/package/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
    <link href="http://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.css" rel="stylesheet" />
    <script src="http://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.js"></script> 
    <title>bootstrap table updateByUniqueId在线例子</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', 
      } ];
        
      //设置唯一字段
      $('#table').bootstrapTable({  
        toolbar:"#toolbar", 
        uniqueId:"Id",
        data:data,
        columns: columns,  
        });
      
     function update(replace)
     {
       
      $('#table').bootstrapTable('updateByUniqueId', {
        id: 13,
        replace:replace,
        row: {
          catalog: '新数据'+ ~~(Math.random() * 100)
          }
       }); 
     }
  
     function getSel()
     {
      var rows=$('#table').bootstrapTable('getSelections'); 
      alert(JSON.stringify(rows));
     }
    </script>
</body>
</html>