关于bootstrap-table的常见用法

ゝ一纸荒年。 2023-05-29 06:15 1阅读 0赞

1.官方网站：

[https://bootstrap-table.com/][https_bootstrap-table.com]

2.需要引入的文件

CSS部分：

JS部分：

3. 使用

两种方式：

1> 在渲染页面的时候，将数据动态填入table元素

2>只在页面上声明一个table元素，如： <table id="table"></table>；然后根据js代码动态加态数据

一般都为页面加载的速度，都选择第二种方式进行数据的异步加载。

具体的使用方式：

$('#table').bootstrapTable({
        url: '/bootstrap-table/data',        // 表格数据来源
        columns: [{
            field: 'id',
            title: 'Item ID'
        }, {
            field: 'name',
            title: 'Item Name'
        }, {
            field: 'price',
            title: 'Item Price'
        },{
            field: 'column1',
            title: '列1'
        },{
            field: 'column2',
            title: '列2' 
        },{
            field: 'column3',
            title: '列3'
        },{
            field: 'column4',
            title: '列4'
        } ]
    });

加载后的图例：

![format_png][]

4.如何灵活使用bootstrap-table的参数：

常用配置参数，可分为四类：

表参数| 列参数|事情参数|方法参数

灵活使用前端的参数，可实现前端数据在无http请求的前提下，表格数据的筛选|导出表格数据|表格编辑|表格删除等功能；可参考官方指导

5.如何实现根据条件动态的请求后端数据，重新加载数据

最重要的方法: $(‘\#bootstrapTableId’).('refresh'); 会重新请求js代码中配置的Url； 在重新请求Url时，会将搜索条件的参数传入；在获取http请求重新返回的数据后，会重新刷新前端的table表格的数据；

[https_bootstrap-table.com]: https://bootstrap-table.com/
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAxOS9wbmcvMjQyMTc5LzE1NTQ4ODU1OTYxMzYtZjZjOTJhMDQtZTQwZC00MzliLTg1OGMtYjU4MTg1NGJlYmEzLnBuZw?x-oss-process=image/format,png