JS组件系列之Bootstrap table表格组件神器【终结篇】

下面就详细讲解一下《JS组件系列之Bootstrap table表格组件神器【终结篇】》的完整攻略。

1. 简介

本文将介绍 Bootstrap table 表格组件的使用方法，以及如何通过该组件快速地构建出符合需求的表格。

2. 安装

Bootstrap table 可以通过 npm 安装：

npm install bootstrap-table

也可以通过以下链接下载：

• zip
• tar.gz

3. 基本配置

在使用 Bootstrap table 之前，需要在 HTML 声明中导入相应的 CSS 和 JS 文件：

<!-- 引入 Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入 Bootstrap table -->
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

需要使用的 table 在 HTML 文件中应该包含一定的结构，如下所示：

<table id="table"></table>

通过以下 js 脚本创建表格：

$('#table').bootstrapTable({
    url: '/path/to/data',
    columns: [{
        field: 'id',
        title: 'Item ID'
    }, {
        field: 'name',
        title: 'Item Name'
    }, {
        field: 'price',
        title: 'Item Price'
    }]
});

其中，url 为数据源的地址，columns 为表格列名和列属性的配置。

4. 进阶配置

Bootstrap table 提供了丰富的选项，用来帮助用户构建出复杂的表格模板。以下是一些常用的选项：

1. data

用来指定表格中的数据，可以是一个普通的 JavaScript 数组，也可以是一个返回值为数组的函数。

```javascript
var data = [
{"id": 1, "name": "item1", "price": "$1"},
{"id": 2, "name": "item2", "price": "$2"},
{"id": 3, "name": "item3", "price": "$3"}
];

$('#table').bootstrapTable({
data: data,
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}]
});
```

1. pagination

用来开启分页功能。

javascript
$('#table').bootstrapTable({
url: '/path/to/data',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}],
pagination: true
});

1. search

用来开启搜索功能。

javascript
$('#table').bootstrapTable({
url: '/path/to/data',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}],
search: true
});

1. sortable

用来开启排序功能。

javascript
$('#table').bootstrapTable({
url: '/path/to/data',
columns: [{
field: 'id',
title: 'Item ID',
sortable: true
}, {
field: 'name',
title: 'Item Name',
sortable: true
}, {
field: 'price',
title: 'Item Price',
sortable: true
}]
});

5. 示例

示例一：使用本地数据和分页功能

<table id="table"></table>

<script>
$(function() {
    var data = [
        { "id": 1, "name": "item1", "price": "$1" },
        { "id": 2, "name": "item2", "price": "$2" },
        { "id": 3, "name": "item3", "price": "$3" },
        { "id": 4, "name": "item4", "price": "$4" },
        { "id": 5, "name": "item5", "price": "$5" },
        { "id": 6, "name": "item6", "price": "$6" },
        { "id": 7, "name": "item7", "price": "$7" },
        { "id": 8, "name": "item8", "price": "$8" },
        { "id": 9, "name": "item9", "price": "$9" },
        { "id": 10, "name": "item10", "price": "$10" },
        { "id": 11, "name": "item11", "price": "$11" },
        { "id": 12, "name": "item12", "price": "$12" }
    ];

    $('#table').bootstrapTable({
        data: data,
        columns: [{
            field: 'id',
            title: 'Item ID',
            sortable: true
        }, {
            field: 'name',
            title: 'Item Name',
            sortable: true
        }, {
            field: 'price',
            title: 'Item Price',
            sortable: true
        }],
        pagination: true,
        pageSize: 5,
        pageList: [5, 10, 20],
        search: true
    });
});
</script>

示例二：使用服务器端数据和排序功能

<table id="table"></table>

<script>
$(function() {
    $('#table').bootstrapTable({
        url: 'http://api.example.com/data',
        columns: [{
            field: 'id',
            title: 'Item ID',
            sortable: true
        }, {
            field: 'name',
            title: 'Item Name',
            sortable: true
        }, {
            field: 'price',
            title: 'Item Price',
            sortable: true
        }],
        pagination: true,
        pageSize: 10,
        pageList: [10, 20, 50],
        search: true
    });
});
</script>

以上就是关于 Bootstrap table 表格组件的完整攻略了，相信通过这篇文章的学习，读者可以轻松掌握 Bootstrap table 的使用方法，进而应用于实际项目中。