Moment/Jquery-一个简单的时间表的愚蠢问题 [英] Moment / Jquery - Silly issue with a simple timeline
问题描述
我从这个社区获得了很多帮助，以使我的时间表报告能够正常工作.设置方法是通过检查ajax返回值来获取日期范围.然后它将按星期几将所有我的条目分组.如果该日期范围内没有特定日期的条目，则它将仅返回今天没有条目".
I had alot of help from this community getting my timeline report to work correctly. The way this is setup is that it will get a date range by checking the ajax return. Then it will group all my entries by their day of the week. If there are no entries for a particular i that date range, then it will simply return "No entries today."
到目前为止，一切正常，您可以看到以下示例: https://jsfiddle.net/j3yg2j7j/7/
Fo far everything is working and you can see the example below: https://jsfiddle.net/j3yg2j7j/7/
但是我注意到，如果日期范围的最后一天是空的，它将忽略它.我需要它返回今天没有条目".即使最后一天是空的.
However I noticed that if the last day in the date range is empty it ignores it. I need it to return "No entries today." even if the last day is empty.
这里是问题的一个例子. https://jsfiddle.net/j3yg2j7j/6/
Here is an example of the issue. https://jsfiddle.net/j3yg2j7j/6/
更新: 发现了另一个奇怪的问题.当我给它的范围从2016-05-02到2016-05-05.我开始收到重复的物品.
UPDATE: Found another weird issue. When i give it the range of 2016-05-02 to 2016-05-05. I start getting duplicate items.
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:
This is the 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);
}
我知道我可以忽略一些简单的内容，但不能完全指责它.
I know im overlooking something simple but cant quite put my finger on it.
推荐答案
对于丢失的最后一天，您将lastDate设置为5月4日的开始-而是在该天结束时设置:
For the missing last day, you're setting lastDate to the beginning of May 4th -- it needs to be at the end of that day instead:
var lastDate = moment("2016-05-04").endOf('day');
重复的事件是因为我为最后一个问题编写的代码假定条目列表中的最后日期将是您要显示的最后日期，因此不需要处理您遇到的情况条目用完后继续循环浏览日期.可以通过处理这种情况来解决:
The repeated events are because the code I wrote for your last question assumed that the last date in the list of entries would be the last date you'd want to display, so it didn't need to handle the case where you continue to loop through dates after running out of entries. That can be fixed by, well, handling that case:
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/
鉴于您问过这个问题的次数很多，让这里保持简单可能会更好.尝试使用效率较低但复杂程度要低得多的版本，该版本不会尝试跳过每个循环上已经显示的事件:
Given the number of times you've asked variations on this question, it may be better to keep things simple here. Try this less efficient but much less complicated version, which doesn't try to skip past already-displayed events on each loop:
// 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-一个简单的时间表的愚蠢问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
