如何 select KendoGrid 中时间列值最接近当前时间（不是日期）的行？

Question

我有一个 Kendo 网格，其中一列有约会时间。在网格负载上，我想 select 时间最接近当前时间的行。

例如 Kendo 网格有四行，每行在约会时间列中有以下值： 09:30上午， 10:30上午， 11:30上午， 12:30上午

当前时间是 11:00 上午。现在在页面加载时，时间为 11:30 AM 的行应该得到 selected.

如果我们在 12:00 上午加载网格，那么具有 12:30 上午的行应该得到 selected。

如果我们在上午 12:30 之后加载网格，那么网格的最后一行应该得到 selected，因为它最接近当前时间：

我当前的 select 行代码如下所示：

Kendo 网格 ID：dgListView

Kendo列

{
        field: "ApptTime",
        hidden: true,
        template: function (dataItem) {
            return kendo.toString(dataItem.ApptTime, "hh:mm tt")
        },
        attributes: {
            ApptTime: "ApptTime"
        }
    }

数据绑定函数

function SetGridRowSelected(e) {
var objGrid = jQuery_1_9_1('#dgListView');
var row;
var currentDate = new Date();

var time = currentDate.toLocaleTimeString();

var data = objGrid.data("kendoGrid");

row = data.tbody.find(">tr:not(.k-grouping-row)").filter(function (i) {
    return (this.cells[18].innerHTML >= time); //18th column in Grid has appointment time
});

if (objGrid && row.length) {
    data.select(row);
    row.click();
    row.addClass('k-state-selected');
}

var scrollContentOffset = grid.find("tbody").offset().top;
var selectContentOffset = data.select().offset().top;
var distance = selectContentOffset - scrollContentOffset;
grid.find(".k-grid-content").animate({
    scrollTop: distance
}, 500);
}

我正在将第 18 列（它有预约时间）与当前时间进行比较，并尝试 select 最接近它的行，但没有进行比较，也没有抛出任何错误。

Answer 1

在此 Dojo

查看整个示例

一天中的时间可以使用纪元时间模计算一天中的毫秒数数学

date.getTime() % 86400000

由于页面是视图，当前时间总是在变化，因此您可能需要更改要选择的行

        setInterval(function() {
          // note: nowModel is an observable bound to a displayed element
          nowModel.set('now', new Date());
          select_row_next_closest_by_time();
        }, 1000);

选择最接近当前时间的下一个（前进时间）需要搜索网格视图的数据。

        var seluid;
        function select_row_next_closest_by_time() {
          var grid = $("#grid").data("kendoGrid");
          var v = grid.dataSource.view();
          var msn = nowModel.get('now').getTime() % 86400000;
          
          var minuid="", mindiff = Number.MAX_SAFE_INTEGER;
          // scan the view data to find next nearest time point
          for (var index=0; index < v.length; index++) {
             var ms = v[index].get('Date').getTime() % 86400000;
             var diff = ms - msn;
             if (diff < 0) diff += 86400000;  // for wrap around
             if (diff < mindiff) {
               mindiff = diff;                // first next closest in time
               minuid = v[index].uid;
             }
          }

          if (seluid != minuid) {
            // change selection
            if (seluid) { 
              grid.tbody.find('tr[data-uid="'+seluid+'"]').removeClass('k-state-selected');
            }
            grid.select(grid.tbody.find('tr[data-uid="'+minuid+'"]'));
            seluid = minuid;
          }
        }
      });

替代方式

到这里 example Dojo

假设网格数据按日期预排序，并且网格中的所有行都是同一天，使用.find() 和.indexOf() 方法来确定应该选择哪一行。当然，这些方法在幕后使用循环。

        var view = $("#grid").data("kendoGrid").dataSource.view();

        nowt = (new Date()).getTime() % 86400000; 
        
        var
          pick = view.find(row => (row.Date.getTime() % 86400000) >= nowt),
          pickIndex = (pick === undefined) ? view.length-1 : view.indexOf(pick)
        ;
        
        $("#grid").data("kendoGrid").select("tr:eq("+pickIndex+")");

如何 select KendoGrid 中时间列值最接近当前时间（不是日期）的行？

How to select the row in KendoGrid having time column value closest to current time (not date)?

javascript

jquery

kendo-ui

kendo-grid

kendo-asp.net-mvc