如何在KendoGrid加载时选择时间最接近当前时间的行？

你的需求很清晰，但当前代码的核心问题在于时间比较逻辑不可靠以及依赖脆弱的列索引，导致筛选失效。下面我来一步步帮你修复这个问题：

原代码的核心问题 #

1. 字符串时间比较的坑：直接用单元格innerHTML的时间字符串（比如"11:00 AM"）和当前时间字符串比较，会因为字符串排序规则出错。比如"12:30 AM"的字符串比"11:00 AM"大，但实际它是凌晨时间，比上午11点早，会导致错误的选中结果。
2. 依赖列索引（第18列）：如果后续Grid的列顺序调整（新增/删除列），这个索引就会失效，非常不健壮。
3. 未处理所有时间都早于当前的情况：当所有预约时间都在当前时间之后时，你的filter会返回空数组，导致没有行被选中。
4. 滚动逻辑变量未定义：原代码里的grid变量没有赋值，会导致滚动逻辑报错。

修复后的完整代码 #

function SetGridRowSelected(e) { 
  var $grid = jQuery_1_9_1('#dgListView'); 
  var gridInstance = $grid.data("kendoGrid");
  
  // 确保Grid实例存在，避免报错
  if (!gridInstance) return;

  var currentDate = new Date();
  var currentTimeMs = currentDate.getTime(); // 转换成时间戳，方便精确比较
  var dataItems = gridInstance.dataSource.data();
  var targetItem = null;
  var minTimeDiff = Infinity;

  // 遍历所有数据项，找到最接近当前时间且不早于当前的预约
  dataItems.forEach(function(item) {
    // 将ApptTime转换成可比较的Date对象
    // 因为ApptTime是时间字符串（比如"09:30 AM"），需要和当前日期拼接成完整日期
    var apptTime = kendo.parseDate(item.ApptTime, "hh:mm tt");
    var apptFullDate = new Date();
    apptFullDate.setHours(apptTime.getHours(), apptTime.getMinutes(), 0, 0);
    var apptTimeMs = apptFullDate.getTime();

    var timeDiff = apptTimeMs - currentTimeMs;
    // 只筛选当前时间之后的预约，且记录最小的时间差
    if (timeDiff >= 0 && timeDiff < minTimeDiff) {
      minTimeDiff = timeDiff;
      targetItem = item;
    }
  });

  // 如果所有预约都在当前时间之前，选中最后一行
  if (!targetItem) {
    targetItem = dataItems[dataItems.length - 1];
  }

  // 根据dataItem的uid找到对应的行元素（比列索引可靠100倍）
  var targetRow = gridInstance.table.find("tr[data-uid='" + targetItem.uid + "']");
  if (targetRow.length) {
    // 执行选中操作
    gridInstance.select(targetRow);
    targetRow.click();
    targetRow.addClass('k-state-selected');

    // 滚动到选中行，修复原代码的变量问题
    var $gridContent = $grid.find(".k-grid-content");
    var scrollOffset = targetRow.offset().top - $gridContent.offset().top + $gridContent.scrollTop();
    $gridContent.animate({ scrollTop: scrollOffset }, 500);
  }
}

关键改进点说明 #

• 时间比较更精确：把所有时间转换成时间戳（毫秒数）进行数值比较，彻底避免字符串比较的错误。
• 不依赖列索引：通过dataItem.uid定位行元素，只要数据源的ApptTime字段不变，不管列怎么调整都不会失效。
• 处理边界情况：当所有预约时间都早于当前时间时，自动选中最后一行，符合你的需求。
• 增加容错判断：先检查Grid实例是否存在，避免页面加载时的潜在报错。
• 修复滚动逻辑：修正了原代码中变量未定义的问题，确保滚动到选中行的功能正常。

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