Moment/Jquery-一个简单时间线的愚蠢问题
Moment / Jquery - Silly issue with a simple timeline
我得到了这个社区的很多帮助,让我的时间线报告正常工作。设置方式是通过检查ajax返回来获取日期范围。然后它会把我所有的参赛作品按星期几分组。如果在该日期范围内没有特定的条目,那么它只会返回"今天没有条目"
到目前为止,一切都在工作,你可以看到下面的例子:https://jsfiddle.net/j3yg2j7j/7/
然而,我注意到,如果日期范围中的最后一天为空,它会忽略它。我需要它返回"今天没有条目"。即使最后一天是空的。
这是一个问题的例子。https://jsfiddle.net/j3yg2j7j/6/
更新:发现另一个奇怪的问题。当我给它的范围从2016-05-02到2016-05-05。我开始收到重复的项目。
https://jsfiddle.net/j3yg2j7j/5/
这是Ajax请求:
responseText: {
d: {
results: [{
ID: "1",
Description: "Test1",
Date: "2016-05-02 09:45"
}, {
ID: "2",
Description: "Test2",
Date: "2016-05-02 10:45"
}, {
ID: "3",
Description: "Test3",
Date: "2016-05-03 11:45"
}, {
ID: "4",
Description: "Test4",
Date: "2016-05-03 11:45",
}]
}
}
这是javascript:
var items_by_date = {}; // declare an object that will have date indexes
$.ajax({url:"/SomeUrlBeginninWithSlash",
dataType: 'json',
cache: false,
success: function (data) {
console.log("SUCCESS",data);
drawTable(data.d.results);
}
});
var drawTable = function(data) {
// First sort the entries by date:
data = data.sort(function(a, b) {
return (moment(a.Date) - moment(b.Date));
});
// Find the date range to work with by looking at each end of the array:
var firstDate = moment("2016-05-02");
var lastDate = moment("2016-05-04");
// loop through each day in that range, keeping track of a starting point i
// so we don't have to keep checking already-passed events.
var i = 0, // pointer to the first entry to check on the next date
ret = "";
for (var thisDate = firstDate; thisDate <= lastDate; thisDate.add(1, 'days')) {
ret += '<tr><th>' + thisDate.format("dddd, MMMM D") + "</th></tr>";
// check to see if the next entry is already beyond thisDate:
if (moment(data[i].Date) > thisDate.endOf('day')) {
ret += "<tr><td>No entries today.</td></tr>";
} else {
// starting at entry i, display all entries before the end of thisDate:
for (var j = i; j < data.length; j++) {
if (moment(data[j].Date) < thisDate.endOf('day')) {
// the next one belongs on thisDate, so display it:
ret += '<tr><td>' + moment(data[j].Date).format("HH:mm") + " - " + data[j].Description + "</td></tr>";
} else {
// next one is not for thisDate, so we can go on to the next day.
i = j; // It'll start here, so we don't waste time looping over past events
break; // (out of the inner loop)
}
}
}
}
$('#x').html(ret);
}
我知道我忽略了一些简单的事情,但我无法完全理解。
对于丢失的最后一天,您将lastDate
设置为5月4日的开始——它需要在当天的结束:
var lastDate = moment("2016-05-04").endOf('day');
重复的事件是因为我为您的上一个问题编写的代码假设条目列表中的最后一个日期是您想要显示的最后一天,所以它不需要处理条目用完后继续循环日期的情况。这可以通过处理这种情况来解决:
if (i === data.length) {
// we've run out of entries; don't try to check past the end of the data array:
ret += "<tr><td>No entries today.</td></tr>";
} else if (moment(data[i].Date) > thisDate.endOf('day')) {
// The next entry is later than this day.
ret += "<tr><td>No entries today.</td></tr>";
} else {
// starting at entry i, display all entries before the end of thisDate:
for (var j = i; j < data.length; j++) {
if (moment(data[j].Date) < thisDate.endOf('day')) {
// the next one belongs on thisDate, so display it:
ret += '<tr><td>' + moment(data[j].Date).format("HH:mm") + " - " + data[j].Description + "</td></tr>";
} else {
// next one is not for thisDate, so we can go on to the next day.
i = j; // It'll start here, so we don't waste time looping over past events
break; // (out of the inner loop)
}
}
// Did we run out of entries? If so, need to update i here to prevent repeated display
if (j === data.length) {
i = j;
}
}
https://jsfiddle.net/tt35rnoo/
然而
考虑到你在这个问题上提出不同问题的次数,这里最好保持简单。试试这个效率较低但不那么复杂的版本,它不会试图跳过每个循环上已经显示的事件:
// loop through each day in that range
var ret = "";
for (var thisDate = firstDate; thisDate <= lastDate; thisDate.add(1, 'days')) {
ret += '<tr><th>' + thisDate.format("dddd, MMMM D") + "</th></tr>";
var showedAnEventToday=false;
for (var j = 0; j < data.length; j++) {
if (
moment(data[j].Date) > thisDate.startOf('day') &&
moment(data[j].Date) < thisDate.endOf('day')
) {
showedAnEventToday = true;
ret += '<tr><td>' + moment(data[j].Date).format("HH:mm") + " - " + data[j].Description + "</td></tr>";
}
}
if (!showedAnEventToday) {
ret += '<tr><td>No events today.</td></tr>';
}
}
$('#x').html(ret);
https://jsfiddle.net/ejaca00t/
相关文章:
- Moment/Jquery-一个简单时间线的愚蠢问题
- 尝试从控制器加载带有json数据的Simile时间线
- 谷歌图表API:添加空白行到时间线
- 用Jquery map和moment js制作一个简单的时间线
- 在时间线上绘制点的公式
- 谷歌表格注释时间线显示精确的值
- 使用 YYYY-MM-DD 值的比较构建 D3 时间线
- visjs时间线的水平滚动条
- 通过Twitter API javascript从时间线获取Twitter状态
- 带注释的时间线,重新绘制时图形会闪烁
- 将时间线添加到引导程序旋转木马
- Javascript进度条时间线
- YQL推特时间线超出速率限制.解决方法
- 谷歌用数字绘制时间线
- 如何定义搜索词框来搜索用户'使用Twitter流API和meter.js的特定时间线
- 谷歌可视化时间线显示鼠标光标的时间
- Simile时间线竖条
- 成功的操作类型未出现在时间线上
- 制作谷歌注释时间线 为缺少的日期填充零
- 如何在 Twitter 嵌入式时间线上设置刷新前的超时