FastAdmin 后台表格如何优雅地实现固定列-小果冻之家

在使用 FastAdmin 开发后台时，我们经常会遇到数据表格列数过多，导致出现横向滚动条的情况。为了提升用户体验，尤其是在需要同时查看左侧关键信息（如ID、名称）和右侧操作按钮时，固定列功能就显得非常重要。FastAdmin 的后台表格是基于强大的 Bootstrap Table 实现的，而固定列功能则依赖于其 fixedColumns 扩展。

本文将详细介绍如何在 FastAdmin 中为后台表格设置固定列。

前提条件

确保你的 FastAdmin 项目中已经集成了 Bootstrap Table 及其 fixed-columns 扩展。通常 FastAdmin 默认会包含这些。

检查扩展文件：
请检查以下路径是否存在对应的 fixed-columns 扩展文件：
- public/assets/libs/bootstrap-table/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.js
- public/assets/libs/bootstrap-table/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css (或未压缩版本)
如果文件不存在，你需要从 Bootstrap Table 的官方 GitHub 仓库 (wenzhixin/bootstrap-table-fixed-columns) 下载并将这两个文件放到上述目录。不过，FastAdmin 较新的版本通常已内置。

设置步骤

核心操作是在对应模块的 JavaScript 文件中修改表格的初始化配置。

1. 定位并修改 JS 文件

你需要找到你想要修改的那个模块的 JS 文件。它通常位于：
public/assets/js/backend/你的控制器名.js

例如，如果是用户管理模块，可能是 public/assets/js/backend/user.js。

2. 修改表格初始化配置

打开该 JS 文件，找到 table.bootstrapTable({ ... }); 这段代码。在这段代码的配置对象中，添加或修改以下属性来实现固定列：

fixedColumns: true：布尔值，设置为 true 来启用固定列功能。
fixedNumber: N：整数，指定从左侧开始固定的列数。重要：如果你的表格第一列是复选框 ({checkbox: true}), 它也算作一列。例如，要固定复选框和ID列，fixedNumber 应设置为 2。
fixedRightNumber: M：整数，指定从右侧开始固定的列数。例如，如果你想固定最右侧的操作列，fixedRightNumber 应设置为 1。

示例代码

假设你的 public/assets/js/backend/yourcontroller.js 文件内容如下：

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'yourcontroller/index' + location.search,
                    add_url: 'yourcontroller/add',
                    edit_url: 'yourcontroller/edit',
                    del_url: 'yourcontroller/del',
                    multi_url: 'yourcontroller/multi',
                    table: 'your_table_name',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                // commonSearch: false, // 如果你不需要通用搜索，可以关闭
                // ... 其他你的表格配置 ...

                // --- 关键：固定列配置 ---
                fixedColumns: true,       // 启用固定列
                fixedNumber: 2,           // 固定左侧2列 (例如：复选框 + ID列)
                // fixedRightNumber: 1,   // 如果需要，固定右侧1列 (例如：操作列)
                // --- 固定列配置结束 ---

                columns: [
                    [
                        {checkbox: true}, // 这是第1列
                        {field: 'id', title: __('Id'), sortable: true}, // 这是第2列
                        {field: 'username', title: __('Username'), operate: 'LIKE'},
                        {field: 'nickname', title: __('Nickname'), operate: 'LIKE'},
                        {field: 'email', title: __('Email'), operate: 'LIKE'},
                        {field: 'status', title: __('Status'), searchList: {"normal":__('Normal'),"hidden":__('Hidden')}, formatter: Table.api.formatter.status},
                        {field: 'logintime', title: __('Logintime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
                        // ... 更多可能导致横向滚动的列 ...
                        {field: 'createtime', title: __('Createtime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
                        {field: 'updatetime', title: __('Updatetime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate} // 这通常是最后一列
                    ]
                ]
                // ... 其他你的表格配置 ...
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});

在上面的示例中：

fixedColumns: true 开启了固定列功能。
fixedNumber: 2 表示表格最左侧的复选框列和ID列将会被固定。
如果需要固定右侧的操作列，可以取消注释并设置 fixedRightNumber: 1。

重要注意事项

列的准确计数：
- fixedNumber 和 fixedRightNumber 都是从 1 开始计数。
- 务必正确计算列数，特别是当第一列是复选框时。
- 如果右侧固定的是操作列，通常 fixedRightNumber: 1 即可。
CSS 文件的加载：
FastAdmin 的 Table.api.init 通常会自动检测并加载 bootstrap-table-fixed-columns.min.css。一般情况下，你不需要手动在 JS 中 requirecss。如果遇到样式问题，可以检查 CSS 是否成功加载。
清除缓存：
修改了 JS 文件后，务必清除浏览器缓存（Ctrl+F5 或 Cmd+Shift+R）或在 FastAdmin 后台点击 "一键清除缓存"，以确保浏览器加载的是最新的脚本文件。
版本兼容性：
尽量确保你使用的 Bootstrap Table 版本与 fixed-columns 扩展版本是兼容的。FastAdmin 自带的版本通常已经处理好了兼容性问题。

点击量: 5