如何在inquiry grid中添加小计列？求实现示例代码

普通HTML表格实现底部小计 #

如果你的项目使用普通HTML表格，可通过添加表脚行并计算汇总值实现小计功能：

<table id="balanceGrid">
  <thead>
    <tr>
      <th>项目</th>
      <th>收入</th>
      <th>支出</th>
      <th>余额</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>项目A</td>
      <td>1000</td>
      <td>300</td>
      <td>700</td>
    </tr>
    <tr>
      <td>项目B</td>
      <td>2500</td>
      <td>1200</td>
      <td>1300</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="total-row">
      <td><strong>小计</strong></td>
      <td><strong id="totalIncome"></strong></td>
      <td><strong id="totalExpense"></strong></td>
      <td><strong id="totalBalance"></strong></td>
    </tr>
  </tfoot>
</table>

<script>
// 计算并填充小计
function calculateTotals() {
  const rows = document.querySelectorAll('#balanceGrid tbody tr');
  let totalIncome = 0, totalExpense = 0, totalBalance = 0;
  
  rows.forEach(row => {
    const income = parseFloat(row.cells[1].textContent);
    const expense = parseFloat(row.cells[2].textContent);
    const balance = parseFloat(row.cells[3].textContent);
    
    totalIncome += income;
    totalExpense += expense;
    totalBalance += balance;
  });
  
  document.getElementById('totalIncome').textContent = totalIncome.toFixed(2);
  document.getElementById('totalExpense').textContent = totalExpense.toFixed(2);
  document.getElementById('totalBalance').textContent = totalBalance.toFixed(2);
}

// 页面加载完成后执行计算
window.onload = calculateTotals;
</script>

<style>
.total-row {
  background-color: #f5f5f5;
}
</style>

AG Grid 实现分组小计（若项目使用AG Grid） #

如果你的项目基于AG Grid，可通过配置聚合函数和分组页脚实现小计：

// 列定义
const columnDefs = [
  { field: 'project', rowGroup: true, hide: true },
  { field: 'income', aggFunc: 'sum', valueFormatter: params => params.value.toFixed(2) },
  { field: 'expense', aggFunc: 'sum', valueFormatter: params => params.value.toFixed(2) },
  { field: 'balance', aggFunc: 'sum', valueFormatter: params => params.value.toFixed(2) }
];

// 网格配置
const gridOptions = {
  columnDefs: columnDefs,
  rowData: [
    { project: '项目A', income: 1000, expense: 300, balance: 700 },
    { project: '项目A', income: 500, expense: 200, balance: 300 },
    { project: '项目B', income: 2500, expense: 1200, balance: 1300 }
  ],
  autoGroupColumnDef: {
    headerName: '项目',
    field: 'project',
    cellRendererParams: {
      innerRenderer: params => params.value
    }
  },
  groupIncludeFooter: true, // 显示分组小计行
  suppressAggFuncInHeader: true
};

// 初始化网格
document.addEventListener('DOMContentLoaded', () => {
  const gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);
});

内容的提问来源于stack exchange，提问作者pmfith