2014-10-31 66 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