如何在Kendo Grid中实现两行差值计算并作为自定义聚合展示

我来帮你完善这个需求的实现，先梳理下原思路里的几个问题，再给出完整的解决方案：

原实现思路中的问题 #

• 条件判断错误：if(totalNumber = 2) 是赋值操作，应该用严格相等判断 if(totalNumber === 2)
• 变量重复赋值：var currentDataItem = data[0]; var currentDataItem = data[1]; 会覆盖第一个值，无法同时获取两行的数据
• 仅处理了January列，没有兼顾其他月份和sum列的差值计算
• 缺少将计算结果渲染到Grid footer的逻辑
• 没有绑定排序事件，无法在排序后自动触发计算

完整实现方案 #

1. 调整Grid配置，预留差值展示位置 #

我们可以在sum列的footer中新增差值展示区域，也可以给其他月份列做相同处理：

columns: [
  // ... 其他月份列保持原有配置不变
  { 
    field: "sum", 
    title: "sum", 
    format: "{0:c2}", 
    filterable: false, 
    footerTemplate: `
      sum: #: kendo.toString(sum, '\\#\\#,\\# €') #
      <br>
      <span id="sum-diff" style="color:#666;"></span>
    ` 
  }
]

2. 修正并完善差值计算函数 #

这个函数会检查当前显示的行数是否为2，计算指定列的变化率（符合你例子中的-50%逻辑），并将结果渲染到footer中：

function calculateDiff() {
  var entityGrid = $("#grid").data("kendoGrid");
  // 使用dataView获取当前排序/过滤后的数据集，比直接用dataSource.data()更准确
  var data = entityGrid.dataView.data(); 
  var totalNumber = data.length;
  
  if(totalNumber !== 2) {
    // 行数不是2时清空差值展示
    $("#sum-diff").text("");
    return;
  }

  // 获取排序后的两行数据
  var latestRow = data[0];
  var previousRow = data[1];
  
  // 计算变化率：(当前值-对比值)/对比值*100，对应你例子的(5000-10000)/10000*100 = -50%
  // 如果需要用平均值做分母，可改成：((latestRow.sum - previousRow.sum)/((latestRow.sum + previousRow.sum)/2))*100
  var sumDiff = ((latestRow.sum - previousRow.sum) / previousRow.sum) * 100;
  // 格式化显示，保留1位小数
  var formattedDiff = kendo.toString(sumDiff, "n1") + "%";
  // 更新到footer区域
  $("#sum-diff").text(`同比变化: ${formattedDiff}`);

  // 如果需要其他月份列也展示差值，可参考上述逻辑扩展
  // 比如给January列footer加id="jan-diff"，然后：
  // var janDiff = ((latestRow.January - previousRow.January) / previousRow.January) * 100;
  // $("#jan-diff").text(`同比变化: ${kendo.toString(janDiff, "n1")}%`);
}

3. 绑定事件确保排序后自动计算 #

在Grid初始化时，绑定数据完成和排序事件，确保每次排序后自动触发计算：

$(document).ready(function() { 
  var grid = $("#grid").kendoGrid({
    // ... 原有的Grid配置（toolbar、dataSource、height等）保持不变
    sortable: true,
    dataBound: function() {
      // 数据绑定完成（包括排序、分页、过滤后）自动计算差值
      calculateDiff();
    }
  }).data("kendoGrid");

  // 额外绑定排序事件，确保排序完成后数据已更新再计算
  grid.dataSource.bind("sort", function() {
    setTimeout(calculateDiff, 100);
  });
});

关键说明 #

• 使用dataView.data()能获取当前经过排序、过滤后的实时数据集，比直接调用dataSource.data()更精准
• 变化率的计算逻辑可以根据需求调整，比如换成以平均值为分母的算法
• 可以轻松扩展到所有月份列，只需要在对应列的footer中添加展示容器，再在计算函数中新增对应列的计算逻辑即可

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