Bootstrap Table 固定列插件使用教程

2026-01-17 09:21:29作者：乔或婵

Bootstrap Table Fixed Columns是一个扩展，让您的表格在滚动时保持侧边列固定。它无缝集成于Bootstrap框架，确保界面美观且响应式。无论数据多少，这个工具都能保证最左侧和右侧的列始终保持可见，提升用户在宽屏或窄屏设备上的浏览体验。查看文档和示例，立即为您的项目增添专业级别的表格功能吧！

项目地址：https://gitcode.com/gh_mirrors/bo/bootstrap-table-fixed-columns

项目介绍

bootstrap-table-fixed-columns 是一个用于固定表格头和列的插件，基于 Bootstrap Table 开发。该插件允许用户在滚动表格时保持表头和指定列固定，适用于需要展示大量数据且需要复杂表头的场景。

项目快速启动

引入必要的文件

首先，确保你已经引入了 Bootstrap 和 Bootstrap Table 的相关文件。然后，引入 bootstrap-table-fixed-columns 插件的文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Table 固定列示例</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css">
</head>
<body>
    <div id="table"></div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.js"></script>
</body>
</html>

初始化表格

使用以下代码初始化表格，并启用固定列功能：

$(function() {
    $('#table').bootstrapTable({
        columns: [
            { field: 'id', title: 'ID', sortable: true, width: 100 },
            { field: 'name', title: 'Name', sortable: true, width: 200 },
            { field: 'price', title: 'Price', sortable: true, width: 150 }
        ],
        data: [
            { id: 1, name: 'Item 1', price: '$1' },
            { id: 2, name: 'Item 2', price: '$2' },
            { id: 3, name: 'Item 3', price: '$3' }
        ],
        fixedColumns: true,
        fixedNumber: 1
    });
});

应用案例和最佳实践

应用案例

数据报表系统：在数据报表系统中，经常需要展示大量数据，固定表头和列可以提高数据的可读性和操作性。
库存管理系统：在库存管理中，固定列可以确保关键信息（如物品名称、库存数量）始终可见。

最佳实践

合理设置列宽：根据数据内容合理设置列宽，避免内容溢出或过于拥挤。
优化滚动性能：对于大量数据，考虑分页或虚拟滚动技术，以优化页面性能。

典型生态项目

Bootstrap Table：bootstrap-table-fixed-columns 是基于 Bootstrap Table 开发的插件，Bootstrap Table 是一个功能强大的表格插件，支持多种扩展和自定义功能。
jQuery：项目依赖于 jQuery，jQuery 是一个快速、小巧的 JavaScript 库，广泛用于 DOM 操作和事件处理。
Bootstrap：Bootstrap 是一个流行的前端框架，提供了丰富的组件和样式，便于快速构建响应式网页。

通过以上内容，您可以快速上手并应用 bootstrap-table-fixed-columns 插件，实现表格的固定列功能。

bootstrap-table-fixed-columns

项目地址：https://gitcode.com/gh_mirrors/bo/bootstrap-table-fixed-columns

登录后查看全文