2014-10-31 40 views
2

我有一些partyevents(一些在同一天)的概述。 我需要在当前的日期和时间对它们进行排序。 事件完成后,需要进入旧事件列表。在过去或未来添加课程

我认为这可以做到的是当事件在过去或未来基于当前时间正在添加一些类与JavaScript。它需要通过标题或其他属性知道事件的日期和时间。 (这样我可以使用显示:在过去的类被添加为即将推出的活动的列表,并在旧事件无添加显示:块。)

Upcomming党事件: - 在此列出

旧事件: - 这里列表

我已经搜索allot,但我找不到任何有用的脚本。 也许有人可以帮助我?

回答

1

我认为你应该使用PHP进行排序。 JavaScript非常复杂,因为您无法将元素移动到DOM中的另一个位置。

<div id="events"> 
//elements are positioned here 
</div> 
<div id="new-events"> 
//you can't simply move the elements to here 
</div> 
<div id="new events"> 
//or to here 
</div> 

但是,您可以使用PHP的事件数组与他们的时间。

<?php 
$events = array('2014-11-1' => array('title' => 'Haloween Party', 'date' => '2014-11-1'), '2014-10-10' => array('title' => 'Table dance party', 'date' => '2014-10-10')); 
function only_new($name) { 
    $date = strtotime($name['date']); 
    return $date > time() ? $name : false; 
} 
$newEvents = array_filter($events, "only_new"); 
$oldEvents = array_filter($events, "only_old"); 
function only_old($name) { 
    $date = strtotime($name['date']); 
    return $date < time() ? $name : false; 
} 

echo '<hr>'; 
echo 'Old events:<br />'; 
var_dump($oldEvents); 
echo '<br />'; 
echo '<hr>New events:<br />'; 
var_dump($newEvents); 
echo '<hr>'; 
?> 

希望它帮助;)

+0

谢谢,我可以使用php的屁股。我gona测试这个。 – Marc 2014-10-31 13:14:07

+0

但你必须使用类似var_dump($ oldEvents); var_dump($ newEvents); – jankal 2014-10-31 13:22:36

+0

哦,上帝,我真的吸这个,没有显示任何东西,需要显示万圣节派对吗 – Marc 2014-10-31 13:25:03

3

你应该definitly考虑knockout.js @http://knockoutjs.com/examples/betterList.html

一旦你知道它是如何工作的,你会简单的喜欢它。

编辑:

多一点信息: 你会observableArrays将触发淘汰赛尽快修改(如sort例如)更改HTML为你工作 - 这太不可思议了吧?

EDIT2:

堆栈溢出淘汰赛很大的支持为好,这样的问题将最有可能得到回答!

所以淘汰赛与视图绑定的视图模型一起使用。 在这个viewmodel里面,你会有一个partyList(在我的例子中叫做party),它是一个observableArray。 的视图模型可以被格式化成这样:

var viewmodel = function(){ 
    self = this;   
    self.parties = ko.observableArray([{ name: "Halloween", date: "2014/10/31" },{ name: "Christmas", date: "2014/12/25" }]); 
    self.sortParties = function(){ 
     self.sortParties().sort(function(a, b){ 
      //here comes the sorting logic you want to apply 
     } 
    }); 
}; 

ko.applyBindings(new viewmodel()); 

的HTML可能是这样的:

<div data-bind="foreach: parties"> 
    <div data-bind="text: name" /> 
    <div data-bind="text: date" /> 
</div> 
<button data-bind="click: sort">Sort</button> 

这个HTML将首先呈现两个内部的div各方阵列中的每个事件(所以在这种情况下2)并显示名称和日期。

如果用户单击该按钮,则会调用排序方法。关于淘汰赛的好处在于,无论数组中的对象的顺序如何,都会在HTML中完全呈现,而无需执行其他任何操作,然后单击该按钮。我提供的代码就是你需要的所有东西(当然包括挖空脚本),以使其发挥作用。

你想添加一个新的派对?没问题,向viewmodel添加一个add方法,这会将一方添加到各方,并且它将出现在HTML中。

+0

感谢,希望我理解:) – Marc 2014-10-31 13:06:03

+0

上面我的技能:( – Marc 2014-10-31 13:14:41

+0

我会更新的答案 – sander 2014-10-31 13:31:58

0

您可以使用Date()作为参考here在JavaScript中获取当前日期。

然后,您可以检查事件的日期是在当前日期之前还是之后,并添加一个类以适当隐藏。

在JavaScript的排序方面,重建轮子没有意义,List.js对我来说太棒了。使用简单,非常轻便。

+0

谢谢,请检查一下。 – Marc 2014-10-31 13:06:34

+0

以上的方法:( – Marc 2014-10-31 13:14:23