用Jquery map和moment js制作一个简单的时间线

Making a simple timeline with Jquery map and moment js

本文关键字：一个 简单 时间线 map Jquery moment js      更新时间：2023-09-26

除了一个我无法解决的小问题外，我有一个工作时间表。它按日期对我的项目进行分组，但在没有条目时跳过日期。我希望显示这些日期，但要加上一条消息，上面写着"没有可显示的条目"。

例如：如果我选择从2016-05-02到2016-05-04 的日期范围

我想得到：

Monday 2 May 2016
1   Test1
2   Test2
Tuesday 3 May 2016
No items to display...
Wednesday 4 May 2016
3   Test3
4   Test4

以下是我的代码的一个粗略示例：https://jsfiddle.net/vLdn68ko/15/

var items_by_date  = {}; // declare an object that will have date indexes
$.ajax({url:"/SomeUrlBeginninWithSlash/daterange/?$filter=(start_date ge '2016-05-02') and (end_date lt '2016-05-04')",
    dataType: 'json',
    cache: false,
    success: function (data) {
      data.d.results.map(function(item){
        var item_date = moment(item.Date).format('dddd D MMMM YYYY');
        // if the date index does not exist we need to declare it
        if(!items_by_date[item_date]) items_by_date[item_date] = [item];
        // else we can just push the item on that array
        else items_by_date[item_date].push(item);
      })
      console.log(items_by_date);
      // now you can render how ever you need to
      drawTable(items_by_date);
    }
});
function drawTable(data){
  $('#dataTable').html('');
  for(var d in data){ // d will be the date index
    $('#dataTable').append('<tr><td colspan="2" style="font-weight: bold;">'+d+'</td></tr>');
    data[d].map(function(item){
      $('#dataTable').append('<tr><td>'+item.ID+'</td><td>'+item.Description+'</td></tr>');
    })
  }
}

我真的很感激在这方面的任何帮助。

因此，您基本上需要从您的范围中获得最小日期，获得最大日期，然后用没有条目的日期填充数据。这有点难看，因为你保留了日期字符串而不是日期，所以必须转换，但它工作得很好：

  var items_by_date  = {}; // declare an object that will have date indexes
  $.ajax({url:"/SomeUrlBeginninWithSlash",
      dataType: 'json',
      cache: false,
      success: function (data) {
        data.d.results.map(function(item){
          var item_date = moment(item.Date).format('dddd D MMMM YYYY');
          // if the date index does not exist we need to declare it
          if(!items_by_date[item_date]) items_by_date[item_date] = [item];
          // else we can just push the item on that array
          else items_by_date[item_date].push(item);
        })
        fillEmpty(items_by_date);
        // now you can render how ever you need to
        drawTable(items_by_date);
      }
  });
  function fillEmpty(items_by_date){
    var dates = Object.keys(items_by_date).map(function(d){return new Date(d)})
    var minDate = new Date(Math.min.apply(null,dates))
    var maxDate = new Date(Math.max.apply(null,dates))
    while(minDate < maxDate){
      minDate.setDate(minDate.getDate()+1)
      var key = moment(minDate).format('dddd D MMMM YYYY');
      items_by_date[key] = items_by_date[key] || [{ID:"",Description: "No items to display..."}]
    }
  }
  function drawTable(data){
    $('#dataTable').html('');
    Object.keys(data).sort(function(a,b){return new Date(a)-new Date(b)}).forEach(function(d){ // you actually need to show them sorted by day
        $('#dataTable').append('<tr><td colspan="2" style="font-weight: bold;">'+d+'</td></tr>');
        data[d].map(function(item){
            $('#dataTable').append('<tr><td>'+item.ID+'</td><td>'+item.Description+'</td></tr>');
        })
      })
  }

Full Fiddle：https://jsfiddle.net/vLdn68ko/18/

相关文章：