Bootstrap Table 插件实现固定左侧列

最新推荐文章于 2025-10-25 11:09:15 发布

原创最新推荐文章于 2025-10-25 11:09:15 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #固定列

html 同时被 3 个专栏收录

1 篇文章

订阅专栏

bootstrap table

1 篇文章

订阅专栏

固定列

1 篇文章

订阅专栏

本文介绍了如何使用Bootstrap Table插件实现表格左侧列固定的效果。在应用中需要引入bootstrap-table-fixed-columns.css和bootstrap-table-fixed-columns.js两个文件。然而，这样做可能会导致列对齐问题，尤其是在初始化和窗口尺寸变化时。为解决此问题，可以使用JavaScript进行调整，确保在触发任何事件和窗口大小改变时调用fixleftwidth()函数来强制列对齐。

Bootstrap Table 插件固定列需要引用以下两个文件

bootstrap-table-fixed-columns.css与bootstrap-table-fixed-columns.js

但是引用这2个文件后，列有时候不对齐，比如初始化和窗口大小变化时，用js处理下效果还好

<table class="table-striped table-hasthead nowrap" id="tableTest1" data-search="true" data-fixed-columns="true" data-fixed-number="3">
    <thead>
        <tr>
            <th data-field="Index" data-formatter="indexFormatter" data-align="center">序号</th>
            <th data-field="OrderTime" data-formatter="formatterDateTime" data-sortable="true" data-align="center">下单日期</th>
            <th data-field="Id" data-sortable="true" data-align="center" data-formatter="OrderDetailsLink">订单号</th>
            <th data-field="ThirdPartyId">第三方编号</th>
            ......
        </tr>
    </thead>
</table>

 $('#table').bootstrapTable({
   url: '@Url.Action("DistributionOrderSearch", "Distribution")',     //请求后台的URL（*）
   //toolbar: '#toolbar',                //工具按钮用哪个容器
   striped: false,                     //是否显示行间隔色
   cache: true,                        //是否使用缓存，默认为true
   pagination: true,                  //是否显示分页（*）
   sortable: true,                    //是否启用排序
   sortOrder: "desc",                   //排序方式
   sortName: "OrderTime",
   sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
   pageNumber: 1,                      //初始化加载第一页，默认第一页
   pageSize: 15,                       //每页的记录行数（*）
   pageList: [10, 15, 30],        //可供选择的每页的行数（*）
   search: false,                      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
   strictSearch: false,                //设置为 true启用 全匹配搜索，否则为模糊搜索
   showRefresh: false,                 //是否显示刷新按钮
   singleSelect: false,
   queryParamsType: "undefined",
   fixedColumns: true,
   fixedNumber: 3,
   onLoadSuccess: function () {
    //加载成功后，需要重新适配下宽度，不然初始化的时候固定列错位
     fixleftwidth()
   }
});
$(function() {
        $('#tableTest1').bootstrapTable({
            height: $(window).height() - 360,
            onAll: function(name, args) {
                fixleftwidth()
            }
        });
        
        fixleftwidth()
        $(window).resize(function() {
            $('#tableTest1').bootstrapTable('resetView');
            fixleftwidth()
        });
    });
function fixleftwidth() {
            setTimeout(function() {
                var fixColumnTds = $(".fixed-table-body-columns tr:first-child td");
                var fixNum = fixColumnTds.length;
                var tableBody = $(".fixed-table-body tbody tr:first-child td");
                for (var i = 0; i < fixNum; i++) {
                    fixColumnTds.eq(i).width(tableBody.eq(i).width())
                }
            }, 0)
        }

由于是用js 强制对齐的，所以在触发任何事件时都要执行下fixleftwidth()，并在窗口改变时也执行fixleftwidth()函数。