Bootstrap 是一套流行的前端框架，提供了丰富的组件和样式，让我们可以更方便地构建优雅的用户界面。BootstrapTable 是基于 Bootstrap 的一个强大的表格插件，具有丰富的功能和易用性，在实际项目中被广泛应用。
本文将介绍如何使用 BootstrapTable 实现表格隐藏列的功能。通过这个示例，你将学会如何：
- 使用 BootstrapTable 来渲染数据表格
- 配置表格的列属性，包括标题、宽度、对齐方式等
- 切换列的显示和隐藏状态，以适应不同的需求
准备工作
在开始之前，需要准备以下工具和资源：
- Bootstrap 4.x：可以从官网下载或使用 CDN 引入。
- BootstrapTable：可以从 GitHub 上下载最新版的源码或使用 CDN 引入。
- jQuery：BootstrapTable 依赖于 jQuery 库。
渲染表格
首先，我们需要创建一个 HTML 页面，并引入所需的资源文件：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------------------- ------------ ----- ---------------- --------------------------------------------------------------------- ----- ---------------- ------------------------------------------------------------------------------ ------- ------------------------------------------------------------------ ------- --------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------- ------- ------ ------ ------------------- ------- -------
在页面中创建一个空的 <table> 元素，并为其添加一个 ID，这个 ID 将用于初始化和配置 BootstrapTable。
下一步，我们需要使用 JavaScript 代码来初始化 BootstrapTable。假设我们有以下数据：
var data = [
{id: 1, name: 'John', age: 30, gender: 'Male'},
{id: 2, name: 'Jane', age: 25, gender: 'Female'},
{id: 3, name: 'Bob', age: 40, gender: 'Male'},
{id: 4, name: 'Alice', age: 35, gender: 'Female'}
];我们可以使用以下代码来渲染表格：
-- -------------------- ---- -------
------------ -
----------------------------
-------- -
------- ----- ------ ----- -------- -------
------- ------- ------ --------
------- ------ ------ -------
------- --------- ------ ---------
--
----- ----
---
---上述代码中，通过 columns 属性定义了表格的列，每个列包含一个字段名和标题。其中，visible 属性用于控制列的显示和隐藏状态。
配置表格列属性
除了标题和字段名外，我们还可以为每个列设置其他属性，例如宽度、对齐方式等。以下是一些常用的列属性：
field：定义数据源中对应的字段名。title：定义列的标题。width：定义列的宽度，可以使用像素或百分比单位。align：定义文本对齐方式，可以取值为'left'、'center'或'right'。formatter：定义单元格内容的格式化函数。例如，可以将日期格式化为指定的字符串。
下面是一个示例代码，展示如何配置表格列属性：
$(function() {
$('#table').bootstrapTable({
columns: [
{field: 'id', title: 'ID', visible: false},
{field: '
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/1195) ，转载请注明来源
[https://www.javascriptcn.com/post/1195](https://www.javascriptcn.com/post/1195)