Question

我目前正在使用jQuery Datepicker来选择'to'和'from'范围来过滤mysql搜索结果。

我想要的是，如果我能以某种方式预读mysql数据库，那么当用户点击日期选择器时，弹出日历会显示（可能在括号中）每天在数据库中找到的项目数。 e.g。

     Jan   2013
M  T  W  T  F  S  S 
--------------------
1  2  3  4  5  6  7
  (1)(5)(8)
--------------------
8  9  10 11 12 13 14
        (9)(3)
--------------------
15 16 17 18 19 20 21
(1)(1)(5)(6)
--------------------
22 23 24 25 26 27 28
--------------------
29 30 31
(8)
--------------------

为了解释一下，它是一个照片库应用程序。我希望能够选择一个日期范围来显示来自...的图片但是如果用户不知道图片的日期并且只是“浏览”，那么在日历上显示哪些日子有照片（由那么那会更好。

也许我可以这样做，内容示例中的一年中的一天：http://keith-wood.name/datepick.html#daymods

我首先设想了一个jquery函数，它查询数据库中的照片数组及其日期，总结起来。但是如果那里有很多，那可能会消耗......所以也许它可以在飞行中完成，即当点击日期选择器并显示1个月时，它只查询该月的结果......但是然后如果月份发生变化，则必须立即再次查询......

我认为这可能最终超出了我的能力，但我们会看到。

提前致谢。

Answer 1

一个简单的解决方案是获取所有日期的总照片数，并将它们存储在一个对象中。即使有多年的数据，如果你只存储每天的计数，我也不认为这会耗费很多太多的内存。

您可以使用Ajax请求获取数据：

$.ajax({
   dataType: "json",
   url: url,
   data: { date: date },
   success: success
});

其中url是从您的Web服务器请求的URL，success是处理响应的回调。您需要编写一些服务器端代码来处理请求，并以您可以使用JavaScript轻松解释的格式从MySQL返回数据，如JSON。

获得数据后，您可以使用日期选择器的beforeShowDay选项在日历显示之前操作日历中的每个日期。例如，您可以添加一个工具提示，其中包含该日期的照片总数：

/* Assume data stored in var count */
$("#datepicker").datepicker(
    beforeShowDay: function(date) {
        return [ true, "", count[date] ];
    }
);

这是一个严重的过度简化（例如，你应该进行某种错误检查），但你得到了要点。这种方法有一个很好的例子here。

如果您担心内存消耗，您可以预加载当前月份的计数，并在用户更改datepicker中可见的月份或年份时发送Ajax请求以更新数据：

$("#datepicker").datepicker(
    onChangeMonthYear: function(year, month, inst) {
        /* Ajax request */
    }
);

将条目数添加到Datepicker字段中

1 个答案: