bootstrap table 事件

bootstrap table onRefreshOptions当前配置发生改变时的事件

当bootstrap table的配置信息发生改变时会执行onRefreshOptions事件,例如当然每页分页数改变、服务器端分页网站改变,但是注意这个并不是像Vue一样配置对象option属性值发生改变就会触发这个事件,而是用户调用了 $('#table').bootstrapTable('refreshOptions',{})刷新配置的方法才会触发onRefreshOptions事件。

onRefreshOptions事件

参数如下

参数名称说明
optionsbootstrap table的设置信息,就是初始化时配置的高度、样式、是否服务器分页等设置

onRefreshOptions事件绑定方式一

onRefreshOptions:function(options)
{
      alert(JSON.stringify(options));
}

onRefreshOptions事件绑定方式二

$('#table').on('refresh-options.bs.table', function (e,options){
   alert(JSON.stringify(options));
});

完整代码

<!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/bootstrap-table-1.14.1/jquery-3.3.1/jquery.js"></script>
    <link href="http://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
    <link href="http://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.css" rel="stylesheet" />
    <script src="http://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.js"></script>
 <link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
    <title>bootstrap table onRefreshOptions当前配置发生改变时的事件例子</title>
    <style>
        .table-demo {
            width: 80%;
            margin: 30px auto 0px auto;
        }
    </style>
</head>
<body>
    <div class="table-demo">
        <table id="table"></table>
    </div>
    <script>
        //设置需要显示的列
        var columns = [{
            field: 'Id',
            title: '编号'
        }, {
            field: 'ProductName',
            title: '产品名称'
        }, {
            field: 'StockNum',
            title: 'Item 库存'
        }];


        //需要显示的数据
        var data = [{
            Id: 1,
            ProductName: '香蕉',
            StockNum: '100'
        }, {
            Id: 2,
            ProductName: '苹果',
            StockNum: '200'
        }];
        
      
      setTimeout(function(){
         data.push( {
            Id: 3,
            ProductName: '苹果',
            StockNum: '200'
        });
      },2000);
   
       // 设置需要显示的列
        var columns = [{
            field: 'Id',
            title: '编号'
        }, {
            field: 'ProductName',
            title: '产品名称'
        }, {
            field: 'StockNum',
            title: 'Item 库存'
        }];


        $('#table').bootstrapTable({
            url: '/package/bootstrap-table-1.14.1/data.json',
            pagination: true,//开启分页
            search: true, //开启刷选
            columns: columns,
           onRefreshOptions:function(options)
           {
           
              alert(JSON.stringify(options));
          }
        });
      $('#table').bootstrapTable('refreshOptions', {  
        search: false
      })
    </script>
</body>
</html>

在线试一试  

文章目录
bootstrap table事件 bootstrap table方法 bootstrap table配置 bootstrap table下载 onRefreshOptions配置改变事件 onClickRow点击行事件 onDblClickRow双击行事件 onClickCell点击单元格事件 onDblClickCell双击单元格事件 onSort列排序事件 onCheck选中行事件 onUncheck选中行事件 onCheckAll全选事件 onUncheckAll取消全选事件 onLoadSuccess数据加载成功事件 onLoadError数据加载失败事件 onColumnSwitch选择列事件 onPageChange分页事件 onSearch搜索事件 onToggle切换视图事件 onPreBody表格渲染前事件 onPostHeader表头渲染事件 onExpandRow点击展开事件 onPostBody表格渲染前事件 onCollapseRow收起事件 onResetView视图切换事件 onRefresh刷新事件 onScrollBody滚动事件