bootstrap table 事件

bootstrap table onLoadSuccess加载服务端数据成功事件

bootstrap table onLoadSuccess加载服务端数据成功的事件,该事件的作用是什么呢?服务端返回自己格式的数据,他大不可能为了PC端还是移动端分别适配不同的JSON格式,这时前端就需要把服务器端返回的数据转换成自己需要的JSON格式数据。而bootstrap table 在绑定数据渲染之前回回调onLoadSuccess事件,给你要机会去处理服务端返回的数据格式。该事件还是非常有用的。

onLoadSuccess事件

服务器端返回数据成功的事件,返回参数如下。

参数名称说明
data服务器端返回的数据格式,如[{id:1},{id:2}]

绑定onLoadSuccess事件方法一

$('#table').bootstrapTable({
    columns: columns, //列对象
    data: data, //要显示的数据对象
    onLoadSuccess: function (data) {
       alert(JSON.stringify(data));  
    }
});

绑定onLoadSuccess事件方法二

$('#table').on('load-success.bs.table', function (e,data) {
      alert(JSON.stringify(data));
});


完整代码

<!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>
    <title>Bootstrap Table onLoadSuccess例子</title>
    <style>
        .table-demo {
            width: 80%;
            margin: 30px auto 0px auto;
        }
        .fixed-table-header {
            border-right: solid 1px #ddd;
            border-top: solid 1px #ddd;
        }
            .fixed-table-header table  {
                border-top: solid 0px #ddd !important;
                margin-top:-1px;
            }
    </style>
</head>
<body >
    <div>
        <table id="table"></table>
    </div>
    <script>
        //设置需要显示的列
        var columns = [{
            field: 'Id',
            title: '编号'
        }, {
            field: 'ProductName',
            title: '名称'
        }, {
            field: 'StockNum',
            title: '库存'
        }];
 
        //bootstrap table初始化数据
        $('#table').bootstrapTable({
          columns: columns,
          classes: "table table-bordered table-striped table-sm ", //设置表格样式
           height:400,
          //******服务器端分页设置****
           url: "/package/bootstrap-table-1.14.1/data.json", //服务器返回数据的网址
           method: 'GET',   //数据请求方式
           sidePagination:'server',
           search:true, //******开启搜索框****//
           searchOnEnterKey:false, //******回车后执行搜索****//
           pagination:true,
           pageNumber:1,
           pageSize:2,
           pageList:"[10, 20, 50, 200]",
           paginationHAlign:"left",
           paginationDetailHAlign:"right",
           //******服务器端分页设置****
           onLoadSuccess:function(data)
           {
            alert(JSON.stringify(data));
           }
        });
    </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滚动事件