bootstrap table 方法

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>
文章目录
bootstrap table方法 bootstrap table事件 bootstrap table配置 bootstrap table下载 基础方法 getOptions获取配置对象 refreshOptions刷新配置 getData获取表格数据方法 getSelections获取选中行方法 getAllSelections所有选中数据 load加载数据方法 mergeCells合并行和列 checkAll全选的方法 uncheckAll反选所有行方法 checkBy根据条件选中行 uncheckBy条件取消中行 refresh重新加载数据的方法 checkInvert反选的方法 destroy注销表格方法 resetView更新表格UI的方法 resetWidth重新适配宽度 showLoading显示加载提示 hideLoading隐藏加载提示 togglePagination隐藏显示分页 toggleFullscreen全屏显示 toggleView切换卡片视图 resetSearch重置搜索框 filterBy数据刷选过滤器 scrollTo滚动到指定位置 getScrollPosition获取当前位置 增删改操作 append追加数据到末尾方法 prepend追加数据到头部方法 remove删除数据的方法 removeAll删除所有数据 insertRow插入一行数据 updateRow更新行数据方法 getRowByUniqueId获取行数据 updateByUniqueId更新行数据 removeByUniqueId删除数据 updateCell更新单元格数据 updateCellByUniqueId更新数据 隐藏显示操作 showRow显示行 hideRow显示行 getHiddenRows获取隐藏的行 show/hide Column隐藏显示列 getVisibleColumns获取显示列 getHiddenColumns获取隐藏列 showAllColumns显示所有列 hideAllColumns隐藏所有列