<think>我们正在讨论Bootstrap Table中的footerFormatter函数。该函数用于自定义表脚（footer）单元格的显示内容。 在Bootstrap Table中，表脚通常用于显示列的汇总信息（如总和、平均值等）。footerFormatter函数允许开发者自定义表脚单元格的渲染方式。 函数签名：footerFormatter(data) 参数：data是该列在表脚中要显示的数据（通常是通过footer选项设置的数据，或者通过计算得到的数据）。 返回值：返回一个字符串（HTML字符串）或DOM元素，用于渲染表脚单元格。 示例用法： 假设我们有一个表格，其中有一列是“价格”，我们希望在表脚中显示价格的总和，并且希望以货币格式显示（如添加货币符号）。 步骤： 1. 在列定义中，为需要自定义表脚的列添加footerFormatter函数。 2. 在表格初始化时，通过footer字段设置表脚的数据（可以是静态数据，也可以通过回调函数动态计算）。 示例代码： ```javascript $('#table').bootstrapTable({ columns: [{ field: 'price', title: '价格', footerFormatter: function(data) { // data 是当前列的表脚数据，这里我们假设是一个数字 return '总价: ¥' + data.toFixed(2); } }], // 设置表脚数据，可以是对象（键为字段名，值为该字段的表脚值） footer: { price: 0 // 初始值，可以通过代码动态更新 } }); ``` 动态更新表脚数据： 可以通过调用方法更新表脚数据，例如： ```javascript // 计算价格总和 let sum = 0; $('#table').bootstrapTable('getData').forEach(row => { sum += row.price; }); // 更新表脚 $('#table').bootstrapTable('updateFooter', { price: sum }); ``` 注意：updateFooter方法需要传递一个对象，其键为字段名，值为该字段在表脚中要显示的值。然后，footerFormatter函数会使用这个值来渲染。 另外，footerFormatter函数也可以直接返回一个DOM元素（通过jQuery创建等），但通常返回HTML字符串即可。 如果不需要复杂的格式化，也可以直接在footer选项中设置字符串，而不使用footerFormatter。但是当需要根据数据动态生成样式或复杂结构时，footerFormatter非常有用。 下面是一个更复杂的例子，根据总价是否超过10000来改变样式： ```javascript footerFormatter: function(data) { if (data > 10000) { return '<span style="color:red; font-weight:bold;">总价: ¥' + data.toFixed(2) + '</span>'; } else { return '<span>总价: ¥' + data.toFixed(2) + '</span>'; } } ``` 因此，footerFormatter的主要作用就是自定义表脚单元格的显示内容和样式。 接下来，根据要求，我们需要在回答后提出3-5个相关问题。注意，问题应该围绕用户的问题和我们的回答展开。 相关问题： 1. 如何在Bootstrap Table中为整个表脚行设置统一的样式？ 2. 当使用footerFormatter时，如何动态更新表脚数据并确保格式化函数重新执行？ 3. 在表脚中显示多个汇总数据（如总和、平均值）的最佳实践是什么？ 4. footerFormatter与普通的formatter函数有何异同点？ 5. 在使用footerFormatter时，如何处理异步加载的数据（如通过AJAX获取汇总数据）？ 注意：第一行必须输出“§§相关问题§§”，然后接着列出问题，不要换行分散。 </think> ### Bootstrap Table `footerFormatter` 函数详解 `footerFormatter` 是 Bootstrap Table 中用于**自定义表脚（Footer）单元格内容**的核心函数。它允许开发者对表脚区域进行高级定制，常用于显示统计信息、汇总数据或操作按钮。 #### 🔍 核心功能与用途 1. **数据汇总显示** 计算并展示列数据的统计值（总和、平均值、最大值等） ```javascript footerFormatter: function(data) { const sum = data.reduce((acc, val) => acc + val, 0); return `<b>合计: ¥${sum.toFixed(2)}</b>`; } ``` 2. **动态内容生成** 根据数据状态生成带条件的表脚内容 ```javascript footerFormatter: function(rows) { const avg = rows.reduce((a, b) => a + b.score, 0) / rows.length; return avg > 60 ? '<span class="text-success">达标</span>' : '<span class="text-danger">不达标</span>'; } ``` 3. **交互功能扩展** 在表脚添加操作按钮（如批量操作） ```javascript footerFormatter: function() { return `<button class="btn btn-sm btn-primary" onclick="exportData()">导出Excel</button>`; } ``` #### 📝 基础用法（三步配置） ```javascript $('#table').bootstrapTable({ columns: [{ field: 'price', title: '价格', // 主列配置... }], // 步骤1：启用表脚 showFooter: true, // 步骤2：定义表脚数据源（两种方式） footer: { price: 0 // 静态初始值 }, // 或动态设置 onLoadSuccess: function(data) { const sum = data.reduce((a, b) => a + b.price, 0); this.options.footer.price = sum; }, // 步骤3：应用footerFormatter columns: [{ field: 'price', // ... footerFormatter: function(value) { return `总金额: <b>¥${value.toLocaleString()}</b>`; } }] }); ``` #### ⚠️ 关键注意事项 1. **数据传递机制** - 单列模式：接收 `footer` 中对应字段的值 - 全行模式：当配置 `footerFormatter` 于首列时，接收**所有行数据数组** ```javascript footerFormatter: function(allRowsData) { // 可访问完整数据集 } ``` 2. **更新表脚数据** 动态刷新表脚内容的方法： ```javascript // 方法1：直接更新配置 $('#table').bootstrapTable('updateFooter', { price: newSumValue }); // 方法2：重置整个表 $('#table').bootstrapTable('resetFooter'); ``` 3. **样式定位技巧** 精准控制表脚样式： ```css /* 定位特定列表脚 */ .bootstrap-table tfoot tr td[data-field="price"] { background-color: #f8f9fa; font-weight: bold; text-align: right !important; } /* 表脚行统一样式 */ .fixed-table-footer { box-shadow: 0 -2px 5px rgba(0,0,0,0.1); } ``` #### 💡 高级应用场景 **多级汇总统计** ```javascript footerFormatter: function(data) { const sum = data.reduce((a, b) => a + b.price, 0); const avg = sum / data.length; return ` <div class="footer-stats"> <span>合计: ¥${sum.toFixed(2)}</span> <span>平均: ¥${avg.toFixed(2)}</span> <span>最大值: ¥${Math.max(...data.map(d => d.price))}</span> </div> `; } ``` **带状态指示的统计** ```javascript footerFormatter: function(value) { return value > 10000 ? '<span class="badge bg-success">超额完成</span>' : '<span class="badge bg-warning">未达目标</span>'; } ```