Блог

У меня есть сетка Kendo, в которой в одном столбце указано время встречи. При загрузке сетки я хочу выбрать строку, время которой наиболее близко к текущему времени.

Например, сетка Kendo состоит из четырех строк, и каждая строка имеет следующее значение в столбце Время встречи: 09:30, 10:30, 11:30, 12:30

и текущее время — 11:00 утра. Теперь при загрузке страницы должна быть выбрана строка, время которой равно 11:30 утра.

Если мы загрузим сетку в 12:00, то должна быть выбрана строка с 12:30.

И если мы загрузим сетку после 12:30, то должна быть выбрана последняя строка сетки, поскольку она будет ближе всего к текущему времени:

Мой текущий код для выбора строки выглядит следующим образом:

Идентификатор сетки Kendo: 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 amp;amp; 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-й столбец (в нем указано время встречи) с текущим временем и пытаюсь выбрать строку, которая ближе всего к нему, но сравнение не происходит, и оно не выдает никаких ошибок.

Смотрите весь пример в этом 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;
          }
        }
      });
  

Альтернативный способ

Перейдите сюда, например, 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 ")");