纳金网

标题: 索引数据框和日期的例子 [打印本页]
作者: 比巴卜    时间: 2013-6-17 16:03
标题: 索引数据框和日期的例子
大约一个小时之前，我给出了关于索引数据框的表示。有个参会者问了关于日期以及如何基于日期范围进行过滤。我告诉他我的设想是将日期转换为数值，然后使用数值相关的范围。但事实证明我错了，下面是一个例子。

开始，我创建了一个基于创建域的存储对象。我们目的是想通过日期来进行搜索，因此我使用创建这个名字。同时将存储对象命名为data。虽然看起来很无聊，但是很有用。
  1. function doSeed() {
  2. var now = new Date();

  4. for(var i=0; i<10; i++) {
  5. var dayDiff = getRandomInt(1, 7);
  6. var thisDate = new Date();
  7. thisDate.setDate(now.getDate() + dayDiff);
  8. db.transaction(["data"],"readwrite").objectStore("data").add({created:thisDate});
  9. }
  10. }

  12. //Credit: Mozilla Developer Center
  13. function getRandomInt (min, max) {
  14. return Math.floor(Math.random() * (max - min + 1)) + min;
  15. }
复制代码
需要注意的是，由于索引数据框调用是异步的，因此代码需要处理更新，让用户知道什么时候操作结束了。由于这只是一个简单的演示，因此添加操作将很快结束，我就没必要担心了。
  1. function doSearch() {
  2. var fromDate = document.querySelector("#fromDate").value;
  3. var toDate = document.querySelector("#toDate").value;

  5. var range;

  7. if(fromDate == "" && toDate == "") return;

  9. var transaction = db.transaction(["data"],"readonly");
  10. var store = transaction.objectStore("data");
  11. var index = store.index("created");

  13. if(fromDate != "") fromDate = new Date(fromDate);
  14. if(toDate != "") toDate = new Date(toDate);

  16. if(fromDate != "" && toDate != "") {
  17. range = IDBKeyRange.bound(fromDate, toDate);
  18. } else if(fromDate == "") {
  19. range = IDBKeyRange.upperBound(toDate);
  20. } else {
  21. range = IDBKeyRange.lowerBound(fromDate);
  22. }

  24. var s = "";
  25. index.openCursor(range).onsuccess = function(e) {
  26. var cursor = e.target.result;
  27. if(cursor) {
  28. s += "<h2>Key "+cursor.key+"</h2><p>";
  29. for(var field in cursor.value) {
  30. s+= field+"="+cursor.value[field]+"
  31. ";
  32. }
  33. s+="</p>";
  34. cursor.continue();
  35. }
  36. document.querySelector("#status").innerHTML = s;
  37. }

  39. }
复制代码
现在就可以创建一个应用程序，它可以让我们添加包含Javascript合法日期的创建属性。请注意，我没有将它转为毫秒，而是直接传入。

最后只需在页面上添加两个日期域即可。在Chrome里还是不错的。

[attach]153303[/attach]

根据上述，我就可以创建一个上限，下限范围的索引数据框，并能在日期前，后或者在日期范围内的提示。

此处唯一需要转换的就是将用户的输入转换为真正的日期对象，这样就可以运行了。

[attach]153304[/attach]

运行下面的演示：

http://www.raymondcamden.com/demos/2013/jun/6/test1.html





欢迎光临 纳金网 (http://rs.narkii.com/club/) Powered by Discuz! X2.5