Bootstrap Table 自定义表头方法详解

0 次阅读

Bootstrap Table 是前端开发中常用的数据表格插件，凭借分页、排序、搜索、数据请求等丰富功能，被广泛应用于后台管理系统、数据展示平台等项目中。默认情况下，Bootstrap Table 会根据 columns 配置自动生成表头，但在实际开发过程中，经常需要实现复杂表头、动态表头、多级表头、合并单元格等效果，这就需要掌握 Bootstrap Table 自定义表头的方法。

Bootstrap Table 表头结构简介

Bootstrap Table 的表头主要由 columns 参数生成，每一个字段对应一个 标签。例如：

JavaScript
$('#table').bootstrapTable({
    columns: [
        {
            field: 'name',
            title: '姓名'
        },
        {
            field: 'age',
            title: '年龄'
        }
    ]
});

生成后的 HTML 结构类似：

HTML

    
        
            
            
        
    

姓名年龄

如果只需要修改文字、宽度、排序方式等基础属性，直接通过 columns 配置即可完成。但对于复杂业务场景，需要使用自定义表头方案。

使用 columns 实现基础自定义表头

Bootstrap Table 最常见的自定义表头方式就是通过 columns 设置。

常用属性包括：

title 设置表头名称

JavaScript
columns: [
    {
        field: 'username',
        title: '用户名称'
    }
]

title 控制显示在表头中的文字，可以根据业务需求修改。

formatter 自定义表头内容

如果需要动态生成表头内容，可以结合 JavaScript：

JavaScript
var tableTitle = "员工信息";

$('#table').bootstrapTable({
    columns: [
        {
            field: 'name',
            title: tableTitle
        }
    ]
});

这种方式适合根据权限、语言环境、业务状态动态调整表头。

设置表头样式

Bootstrap Table 支持通过 class 或 cellStyle 调整表头样式。

示例：

JavaScript
columns: [
    {
        field: 'price',
        title: '价格',
        class: 'text-center'
    }
]

也可以通过 CSS：

CSS
.bootstrap-table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

实现统一样式控制。

使用 HTML 自定义 Bootstrap Table 表头

当项目需要完全控制表头结构时，可以直接编写 HTML。

示例：

HTML
 id="table">
    
        
             data-field="id">编号
             data-field="name">名称
             data-field="status">状态

初始化：

JavaScript
$('#table').bootstrapTable({
    data: [
        {
            id:1,
            name:'测试数据',
            status:'正常'
        }
    ]
});

这种方式适合表头固定、结构简单的页面。

Bootstrap Table 多级表头实现方法

后台报表中经常需要类似 Excel 的多级表头，例如：

用户信息销售数据
姓名年龄数量金额

Bootstrap Table 可以通过嵌套 columns 实现。

示例：

JavaScript
$('#table').bootstrapTable({
    columns: [
        {
            title: '用户信息',
            colspan: 2,
            align: 'center',
            columns: [
                {
                    field: 'name',
                    title: '姓名'
                },
                {
                    field: 'age',
                    title: '年龄'
                }
            ]
        },
        {
            title: '销售数据',
            colspan: 2,
            align: 'center',
            columns: [
                {
                    field: 'count',
                    title: '数量'
                },
                {
                    field: 'money',
                    title: '金额'
                }
            ]
        }
    ]
});

生成效果：

用户信息        销售数据
姓名  年龄      数量  金额

这种方式非常适合统计报表、运营数据分析页面。

动态生成 Bootstrap Table 表头

部分系统中的表头来自后台接口，例如：

  • 用户自定义字段

  • 数据库动态字段

  • 不同角色展示不同列

可以通过 Ajax 获取表头后初始化。

示例：

JavaScript
$.ajax({
    url:'/getColumns',
    success:function(result){

        $('#table').bootstrapTable({
            columns: result.columns,
            data: result.data
        });

    }
});

后台返回：

JSON
{
    "columns":[
        {
            "field":"name",
            "title":"姓名"
        },
        {
            "field":"department",
            "title":"部门"
        }
    ]
}

这样可以实现真正意义上的动态表格。

使用事件修改表头内容

Bootstrap Table 提供了丰富事件，可以在加载完成后修改表头。

例如：

JavaScript
$('#table').on('post-header.bs.table', function () {

    $('.fixed-table-header th').each(function(){

        $(this).attr('title','自定义提示');

    });

});

post-header.bs.table 会在表头生成完成后触发，可以用于：

  • 添加 Tooltip

  • 修改文本

  • 增加图标

  • 调整样式

自定义表头添加排序图标

默认情况下 Bootstrap Table 会自动添加排序功能：

JavaScript
$('#table').bootstrapTable({
    sortable:true,
    columns:[
        {
            field:'date',
            title:'日期',
            sortable:true
        }
    ]
});

如果需要自定义排序提示，可以结合 CSS：

CSS
.sortable {
    cursor:pointer;
}

或者通过 formatter、事件方式增加自定义图标。

Bootstrap Table 表头合并单元格

复杂报表通常需要 rowspan 和 colspan。

示例：

JavaScript
columns:[
    {
        title:'基础信息',
        colspan:3,
        align:'center'
    }
]

也可以通过 HTML：

HTML
 rowspan="2">编号
 colspan="2">用户信息

实现跨行和跨列显示。

自定义表头常见问题解决

表头没有显示

可能原因：

  1. columns 配置格式错误

  2. field 名称和数据字段不一致

  3. 初始化顺序错误

检查：

JavaScript
console.log(columns);

确认配置是否正确。

动态表头刷新无效

如果修改 columns 后没有更新，可以销毁重新初始化：

JavaScript
$('#table').bootstrapTable('destroy');

$('#table').bootstrapTable({
    columns:newColumns,
    data:data
});

多级表头错位

通常是因为：

  • colspan 设置错误

  • columns 层级数量不匹配

  • 固定列插件影响

建议检查每一级 columns 数量是否对应。

Bootstrap Table 自定义表头最佳实践

实际项目开发中，自定义表头建议遵循以下原则：

1. 简单页面优先使用 columns

普通列表展示直接使用：

JavaScript
columns:[
    {
        field:'name',
        title:'名称'
    }
]

维护成本最低。

2. 复杂报表采用多级 columns

统计分析类页面推荐使用嵌套 columns，结构更加清晰。

3. 动态字段做好数据校验

后台返回字段时，需要确保：

  • field 唯一

  • title 非空

  • 数据类型匹配

避免出现表头显示异常。

4. 样式与逻辑分离

不要大量通过 JavaScript 修改 CSS，建议：

  • JS 控制结构

  • CSS 控制展示

方便后期维护。

总结

Bootstrap Table 自定义表头主要有三种方式：通过 columns 配置生成表头、通过 HTML 手动定义表头、通过接口动态加载表头。对于简单数据列表，columns 配置即可满足需求；对于复杂业务报表，则可以结合多级 columns、colspan、rowspan 实现灵活布局。

掌握 Bootstrap Table 表头自定义技巧，可以有效提升数据展示效果，让后台管理系统中的表格更加符合实际业务需求，同时提高页面交互体验和开发效率。

文章标签
Bootstrap Table 表格插件 自定义表头 多级表头 前端开发