企业官网建设流程全解析

• 前端
• UI组件

导读

本文聚焦 Jspreadsheet（jspreadsheet-ce）的表格页脚（footer）功能：如何在数据网格底部固定一行或多行自定义汇总区域，并通过footers配置项在初始化时注入文本或公式。文章将以官方示例 footers.md 为主线，完整还原其可运行的 HTML 源码，同时结合 footer.js、columns.js、history.js 等源码实现，深入剖析页脚渲染、自定义公式注册以及列增删移动时页脚同步的底层机制。读完本文，你将掌握 Jspreadsheet 页脚的完整配置方法、自定义聚合公式（如 SUMCOL）的注册方式，并能基于源码理解其生命周期行为。

页脚是什么：固定计算区的核心价值

页脚（table footer）是固定在 Jspreadsheet 表格底部的独立区域，通常以<tfoot>元素呈现。它最常见的用途是在表格底部展示列级汇总，例如"总计""平均值""最大值"等。与单元格内的普通公式不同，页脚公式的特点是：

• 位置固定：不随数据滚动或排序而移动，始终位于表格底部；
• 独立渲染：由footers配置驱动，通过 setFooter 单独渲染；
• 支持公式：既可以写静态文本（如 "Total"），也可以写=SUM(B1:B4)这类标准公式，还可以调用通过formula.setFormula注册的自定义公式。

在 Jspreadsheet 的官方示例中，页脚最常见的应用是"订单明细 + 底部合计"场景：数据区存放商品名、数量、单价与金额，页脚固定显示数量合计与金额合计。

footers 配置项与初始化示例

页脚在 Jspreadsheet 初始化时通过footers配置项注入，其形态为二维数组：外层数组的每个元素对应页脚中的一行，内层数组的每个元素对应该行在每一列上的取值。官方示例（v4）给出了一个完整可运行的页面：

<html> <script src="https://bossanova.uk/jspreadsheet/v4/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula/dist/index.min.js"></script> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jspreadsheet.css" type="text/css" /> <div id="spreadsheet"></div> <script> // A custom method to SUM all the cells in the current column let SUMCOL = function(columnId) { let instance = jspreadsheet.current let total = 0; for (let j = 0; j < instance.options.data.length; j++) { if (Number(instance.records[j][columnId].innerHTML)) { total += Number(instance.records[j][columnId].innerHTML); } } return total; } formula.setFormula({ SUMCOL }) let table = jspreadsheet(document.getElementById('spreadsheet'), { data: [ ['Cheese', 10, 6.00, "=B1*C1"], ['Apples', 5, 4.00, "=B2*C2"], ['Carrots', 5, 1.00, "=B3*C3"], ['Oranges', 6, 2.00, "=B4*C4"], ], minDimensions: [4,10], columnDrag:true, footers: [['Total','=SUMCOL(1)','=SUMCOL(2)','=SUMCOL(3)']], columns: [{ width:'200px', }] }); </script> </html>

上例中各配置项的作用如下：

其中=SUMCOL(1)的入参是列索引（从 0 开始）：SUMCOL(1)对第 1 列（B 列数量）求和，SUMCOL(2)对第 2 列（C 列单价）求和，SUMCOL(3)对第 3 列（D 列金额）求和——D 列本身是公式列，其单元格内的计算结果会被Number()转换后累加，从而实现"对公式列再求和"的级联汇总。

自定义公式注册：formula.setFormula 与 SUMCOL 拆解

页脚公式并不局限于内置的SUM、AVERAGE等，Jspreadsheet 的公式引擎@jspreadsheet/formula（仓库源码在 internal.js 中直接import formula from '@jspreadsheet/formula'引入）允许通过formula.setFormula注册自定义函数，示例中的SUMCOL即为一例。

SUMCOL的实现要点：

let SUMCOL = function(columnId) { let instance = jspreadsheet.current // 当前活动实例 let total = 0; for (let j = 0; j < instance.options.data.length; j++) { if (Number(instance.records[j][columnId].innerHTML)) { total += Number(instance.records[j][columnId].innerHTML); } } return total; } formula.setFormula({ SUMCOL })

• jspreadsheet.current用于获取当前活动的工作表实例（多工作表场景下指向最近操作的实例）；
• instance.records保存了每个可见单元格的 DOM 元素，records[j][columnId].innerHTML读取第 j 行第 columnId 列的渲染后文本，再经Number()转数值；
• if (Number(...))过滤掉非数值单元格，避免把文本或空值累加进去；
• 注册后即可在页脚（以及数据区任意单元格）中以=SUMCOL(1)形式调用。

这种"遍历可见单元格求和"的实现方式与内置=SUM(B1:B4)的引用区间写法互为补充：SUM适合固定行区间的普通列，SUMCOL适合按列整体汇总且无需关心行号的场景。

源码级原理：setFooter 的渲染流程

页脚的渲染核心位于 footer.js 的setFooter函数。当初始化配置或运行时更新footers后，Jspreadsheet 按以下流程渲染：

1. 建立<tfoot>容器：若实例尚无tfoot节点，则document.createElement('tfoot')并追加到obj.table末尾（footer.js）；
2. 逐行逐列写入单元格：外层循环遍历footers的每一行，内层循环遍历obj.headers.length个列；如果某位置未配置取值，会自动补为空字符串（footer.js）；
3. 文本对齐继承列设置：新建的页脚单元格取columns[i].align || defaultColAlign || 'center'作为textAlign（footer.js），因此页脚文本默认与数据列对齐策略保持一致；
4. 公式求值：单元格内容通过parseValue.call(obj, ...)解析——parseValue定义于 internal.js，它负责将=SUMCOL(1)这类表达式交给公式引擎计算并把结果写入td.textContent（footer.js）；
5. 隐藏列联动：td.style.display = obj.cols[i].colElement.style.display让页脚单元格跟随hideColumn()/showColumn()同步显隐（footer.js）。

setFooter的触发点覆盖了数据变更的主要路径：

• 数据或尺寸变化后的整体刷新：updateTable在渲染末尾调用setFooter.call(obj)（internal.js）；
• 列显隐操作后重建页脚：hideColumn/showColumn末尾均调用setFooter（columns.js）。

动态场景：列增删、移动与撤销重做时的页脚同步

页脚并不是静态文本，Jspreadsheet 在结构变更时会对footers数组做同步维护，确保页脚始终与列一一对应：

• 插入列：insertColumn会为每一行页脚在该位置插入空字符串占位，保证新列对应一个可编辑的页脚单元格（columns.js）；
• 移动列：moveColumn同步对页脚数组做同样的splice位移，实现"列拖到哪、页脚跟着走"，这也正是示例中开启columnDrag:true的意义所在（columns.js）；
• 删除列：deleteColumn从每行页脚中splice掉对应列的取值，并记录到历史记录中（columns.js）；
• 撤销 / 重做：undo/redo在处理列结构历史时，会分别从footers数组删除或回填对应片段（history.js、history.js），保证撤销/重做后页脚与列结构一致。

因此，"合计列"这类页脚在用户拖拽列、插入列或撤销操作后依然能指向正确的列，不会出现错位。

从已有 HTML 表格生成页脚

除了在 JS 配置中手写footers，Jspreadsheet 还支持从现成的 HTML<table>初始化时自动提取页脚。在 helpers.js 的表格解析逻辑中，el.querySelectorAll('tfoot tr')会抓取源表格<tfoot>中每一行的单元格文本，组装为二维数组写入options.footers。这意味着你可以先写一个带<tfoot>的静态 HTML 表格，再交给 Jspreadsheet 渲染，页脚内容会被原样保留。

测试验证：footers 的预期行为

仓库测试 footer.js 明确验证了页脚的渲染行为：初始化一个带footers: [['a','b','c'], [1,2,3]]的双行页脚工作表后，断言<tfoot>首行子节点（索引 1 起，因为索引 0 是行首单元格）的innerHTML分别为'a'、'b'、'c'，第二行分别为'1'、'2'、'3'。这从测试层面确认了：

• 页脚渲染在<tfoot>元素中；
• 每行页脚的首个td会被跳过（作为行首分隔）；
• 数值型页脚内容会以文本形式写入单元格。

这一"从第 1 个单元格（索引 1）开始渲染"的行为与 footer.js 中children[i + 1]的索引偏移逻辑完全对应。

最佳实践与注意事项

1. 区分内置公式与自定义公式：对固定行区间的简单汇总直接用=SUM(B1:B4)；需要"对整列求和"或"对公式列求和"时再自定义SUMCOL这类函数，并通过formula.setFormula注册；
2. 页脚取值支持多行：footers是二维数组，可配置多行页脚（如合计行 + 平均行），每行独立渲染；
3. 空值自动补齐：某列未配置页脚取值时会渲染为空，不必刻意补齐占位符；
4. 列操作联动：由于插入、删除、移动列时页脚数组会被同步维护，建议在页脚中使用列索引对应的公式时保持列顺序稳定，或在拖拽后通过运行时 API 重新计算；
5. 对齐一致性：页脚默认继承列的对齐设置（未设置时居中），如需统一样式可在columns中配置align；
6. 运行时可更新：页脚支持在初始化后通过实例 API 动态修改，相关用法可参考 程序化更新示例 与 列拖拽示例；v5 版本还支持直接使用=SUM(B1:B4)区间引用语法，见 新版页脚文档。

小结

Jspreadsheet 的表格页脚机制以footers二维数组为配置入口，以tfoot+setFooter为渲染骨架，以@jspreadsheet/formula公式引擎为求值核心，并在列增删、移动、显隐、撤销重做等全部结构变更路径中保持同步。官方示例中的SUMCOL自定义公式展示了"对整列可见单元格求和"的典型模式，是构建订单合计、报表汇总等场景的实用方案。结合 footer.js、columns.js、history.js 与 footer.js 测试，你可以完全掌控页脚的渲染时机与数据流，并在此基础上扩展出自己的聚合逻辑。

• 前端
• UI组件