bootstrap table 事件

bootstrap table onColumnSwitch选择列事件

bootstrap table onColumnSwitch 当设置了showColumns属性为true 时,用户选择显示还是隐藏某个列时触发的事件。
 

onColumnSwitch事件

加载服务器端数据失败时的事件,返回参数如下。

参数名称说明
field选中的列名称 字段名称
checked是否显示该列 true显示 false 不显示

绑定onColumnSwitch事件方法一

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

绑定onColumnSwitch事件方法二

$('#table').on('column-switch.bs.table', function (e,field, checked) {
      alert(JSON.stringify(field));
});

完整代码

这里需要注意的是showColumns设置true你可能会看不到效果,点击按钮无法显示下拉列表,这时请确保是否引用了popper.min.js和bootstrap.min.js文件

<!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" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>


    <title>Bootstrap Table onColumnSwitch 例子</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'
        }];
        //bootstrap table初始化数据
        $('#table').bootstrapTable({
            columns: columns,
            data: data,
           showColumns:true,
           onColumnSwitch: function (field, checked) {
               alert(JSON.stringify(field));  
          }
        });
      
    </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滚动事件