如何在Kendo Grid单元格中添加按指定日期计算10天时长的进度条

算力阿峰

2026-7-25

在Kendo Grid单元格实现基于日期的10天进度条

步骤1：修改Grid列的ClientTemplate

替换你现有的列定义，通过模板嵌入JS逻辑计算进度：

columns.Bound(p => p.DateOfReminder)
       .Title("进度")
       .ClientTemplate(@"
           <div class='progress-container'>
               <div class='progress-bar' style='width: #= calculateProgress(DateOfReminder) #%'></div>
               <span class='progress-text'>#= calculateProgress(DateOfReminder) #%</span>
           </div>
       ")
       .Sortable(false)
       .Width("12%");

步骤2：添加进度计算的全局JS函数

在页面<script>标签中定义计算逻辑，处理日期差值与边界情况：

function calculateProgress(reminderDate) {
    if (!reminderDate) return 0; // 日期为空时返回0%
    
    const startDate = new Date(reminderDate);
    const today = new Date();
    const dayDiff = Math.floor((today.getTime() - startDate.getTime()) / (1000 * 3600 * 24));
    
    if (dayDiff >= 10) {
        return 100; // 超过10天进度拉满
    } else if (dayDiff < 0) {
        return 0; // 提醒日期在未来，进度为0
    } else {
        return Math.round((dayDiff / 10) * 100); // 按天数比例计算进度
    }
}

步骤3：添加CSS样式美化进度条

在页面<style>标签中加入样式，让进度条显示更直观：

.progress-container {
    position: relative;
    height: 20px;
    width: 100%;
    background: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: #28a745;
    transition: width 0.3s ease;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: bold;
    color: #333;
}