如何用TypeScript求和Kendo Grid不同行TimeDuration列并绑定到文本框

开发者阿泽

2026-9-30

解决方案

你遇到的求和不生效问题通常由两个核心原因导致：一是没有监听Kendo DataSource的数据变化事件，二是未将字符串类型的TimeDuration转为数值计算，另外你贴出的列配置代码末尾多了多余的闭合大括号，可先删除避免语法报错。

1. 为DataSource添加数据变化监听

修改你的数据源配置，添加change事件，每次数据增删改、过滤、排序时自动触发求和逻辑：

OverTimeDetailGridDataSource = new kendo.data.DataSource({
    data: this.OverTimeDetailList,
    serverPaging: false,
    autoSync: false,
    pageSize: 10,
    batch: false,
    serverSorting: false,
    serverFiltering: false,
    // 新增change事件监听，数据变动自动触发求和
    change: () => {
        this.calculateTimeDurationSum();
    }
});

2. 编写求和逻辑

实现求和方法，注意字符串转数值，同时处理空值、非法数值的异常场景：

// 确保Sum是组件的公共可响应属性，和模板绑定的vm.Sum指向一致
Sum: string | number = 0;

calculateTimeDurationSum(): void {
    // 如需仅统计当前页展示的行，将.data()替换为.view()即可
    const allGridItems = this.OverTimeDetailGridDataSource.data();
    let totalHours = 0;

    allGridItems.forEach(item => {
        const durationNum = parseFloat(item.TimeDuration);
        // 仅累加合法的数值
        if (!isNaN(durationNum)) {
            totalHours += durationNum;
        }
    });

    // 按需调整保留小数位数，这里示例保留2位
    this.Sum = totalHours.toFixed(2);
}