bootstrap table 事件

bootstrap table onSort列排序事件

当点击排序列时bootstrap table的事件,通过onSort排序事件我们可以得到被点击的列字段名和排序方式desc asc。

onSort排序事件

点击排序列的事件,事件名称 onSort,返回参数如下。

参数名称说明
name字段名称,如ProductName
order当前排序方式 desc、asc

初始化时绑定onSort事件

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

初始化后绑定onSort事件

$('#table').on('sort.bs.table', function (e,name,order) {
      alert(name);
})

注意:初始化时注册和初始化后注册的第一个返回参数对象是不一样的

完整代码

<!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 onSort排序事件在线例子</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;
            }
        /*定义类名为.thead-blue的样式*/
        .table .thead-blue th {
            color: #fff;
            background-color: #3195f1;
            border-color: #0d7adf;
        }
    </style>
</head>
<body>
    <div class="table-demo">
        <table id="table"></table>
    </div>
    <script>
        //设置需要显示的列
        var columns = [{
            field: 'Id',
            title: '编号',
            sortable: true
        }, {
            field: 'ProductName',
            title: '产品名称',
            sortable: true
        }, {
            field: 'StockNum',
            title: '库存',
            sortable: true


        }];


        //bootstrap table初始化数据
        $('#table').bootstrapTable({
            columns: columns,
            data: getData(),                      //请求后台的URL(*)
            method: 'GET',                      //请求方式(*)
            classes: "table table-bordered table-striped table-sm",
            height: 400,
            customSort: customSort,
            onSort: function (name, order) {
                alert(order)
            }
        });


        // $('#table').on('sort.bs.table', function (e,name,order) {
        //     alert(name);
        //});


        function customSort(sortName, sortOrder, data) {
            var order = sortOrder === 'desc' ? -1 : 1
            data.sort(function (a, b) {
                var v1 = a[sortName]
                var v2 = b[sortName]
                if (v1 == 3) {
                    return -1;
                }
                if (v1 > v2) {
                    return 1
                }
                return 0
            })
        }


        function getData() {
            var data = [];


            for (var i = 0; i < 2; i++) {
                var item = {
                    Id: i,
                    ProductName: '香蕉' + i,
                    StockNum: i
                };


                data.push(item);
            };
            for (var i = 0; i < 5; i++) {
                var item = {
                    Id: i,
                    ProductName: '苹果' + i,
                    StockNum: i
                };


                data.push(item);
            };
            for (var i = 0; i < 5; i++) {
                var item = {
                    Id: i,
                    ProductName: '橘子' + i,
                    StockNum: i
                };


                data.push(item);
            };
            return 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滚动事件