如何基于选中行设置Kendo Grid的聚合计算总价？

• 第一步：为Grid绑定change事件，监听行选中状态变化
  在Grid配置中添加事件处理逻辑：

  $("#grid").kendoGrid({
    // 原有配置项...
    change: function() {
      calculateTotal(); // 选中状态变更时重新计算总价
    }
  });
  

• 第二步：修改总价计算函数，区分选中行与全量计算场景
  重写总价计算逻辑：

  function calculateTotal() {
    var grid = $("#grid").data("kendoGrid");
    var total = 0;
    var selectedRows = grid.select();
  
    if (selectedRows.length > 0) {
      // 存在选中行时，仅计算选中行的总价
      selectedRows.each(function() {
        var item = grid.dataItem(this);
        total += item.UnitPrice * item.Quantity; // 替换为你实际的价格、数量字段
      });
    } else {
      // 无选中行时，计算所有行的总价
      var allData = grid.dataSource.data();
      allData.forEach(function(item) {
        total += item.UnitPrice * item.Quantity; // 同上，替换为实际字段
      });
    }
  
    // 更新页面上的总价展示元素
    $("#totalDisplay").text(total.toFixed(2)); // 替换为你实际的总价显示元素ID
  }
  

• 第三步：初始化页面时执行一次计算
  确保页面加载完成后默认显示正确总价：

  $(document).ready(function() {
    // Grid初始化代码...
    calculateTotal();
  });
  

关键说明 #

• 请将代码中的UnitPrice、Quantity替换为你Grid中实际的价格、数量字段名，总价计算逻辑可根据业务需求调整。
• grid.select()会返回选中行的DOM元素，通过grid.dataItem()可获取对应行的数据模型。
• change事件会在选中/取消选中行时触发，保证总价实时更新。

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