《前端》BootstrapTable表格的使用-2020年9月24日--（？？传递参数queryParams）

• 基本使用

引用文件：

引用文件要包括 jquery.js以及bootstrap、bootstrap-table各自的css文件和js文件。（注意顺序）

    <!-- 引用 css-->
    <link rel="stylesheet" href="./lib/css/bootstrap-3.3.4.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <!-- 引用 js-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="./js/bootstrap-3.3.7.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>

示例详解：

html上放一个<table>标签（设置id）：

<table id="docDateTable" class="table table-hover table-bordered"></table>

在js文件，先放基本信息：

其中表头是columns、表内容是data。

$('#docDateTable').bootstrapTable({
    columns: [{
                field: 'name',
                title: '姓名',
            },{
                field: 'cityname',
                title: '所在城市',
            }],
            data: [{
                "name": "bella",//对应的field的名字
                "cityname": "上海"
            }, {
                "name": "tom",
                "cityname": "北京"
            }],
})

效果图：

• 功能1：自定义配置列的表格    

加上以下代码：

   showColumns: true, //是否显示所有的列

效果图：

 

因为顺序错导致踩雷：我单独一个文件试验的时候能出效果。但是当组合的其他页面的时候，却不生效报错了。

原因：添加引用文件的顺序导致的，放到上面就显示了。

 

• 功能2：自定义配置列的onColumnSwitch选择列事件 

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

onColumnSwitch事件：

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

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

绑定onColumnSwitch事件的两种方法：

方法一：

        $('#table').bootstrapTable({

            columns: columns, //列对象

            data: data, //要显示的数据对象

            onColumnSwitch: function(field, checked) {

                alert(JSON.stringify(field));

            }

        });

方法二：

        $('#table').on('column-switch.bs.table', function (e,field, checked) {

            alert(JSON.stringify(field));

        });

完整代码：

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