排序對于我們是再熟悉不過了,在絕大數應用程式中都會有這樣一個場景:當我們從伺服器端擷取一個清單時,在界面上進行渲染,我們可以會依賴于某一個規則來進行排序,當然此時絕大多數會再次與伺服器進行互動來進行重新渲染清單到用戶端,這樣做未嘗不可,但是在有些情況下,我們既不需要利用架構也不需要重新生成清單到用戶端,明明可以在用戶端進行,達到我們的目的,為何要再一次發送請求到伺服器呢?下面我們來看看。
我們首先看看在w3c中js的sort方法。
結果輸出:
如果調用該方法時沒有使用參數,将按字母順序對數組中的元素進行排序,說得更精确點,是按照字元編碼的順序進行排序,但是我們可以自定義排序規則。
我們在sort方法參數中自定義排序函數,如下:
輸出如下:
如上是在w3c中的例子,是不是sort方法就這麼簡單呢?有何實際用途沒有呢?
我能想到的實際場景:在頁面上渲染一個清單時,可能該頁内容比較多,我們需要滾動滑鼠才能看到其他内容或者說該頁前幾條内容我們已經看過,想看看其他内容,此時我們需要将頁面内容進行反轉,我們該如何做呢?
首先我們來看看界面效果,如下:

上述清單是通過日期進行排序,在右上角有一個排序圖示,我們需要實作的是點選該排序圖示,來實作清單升序和降序的切換。
既然是排序我們首先需要考慮的是要有一個排序規則,我們添加一個排序序号則可以實作在用戶端清單的排序或者反轉。接下來我們通過ASP.NET MVC來實作示範sort的反轉。看下視圖代碼:
上述 class="message-list-item" 有一個特性 data-sort ,通過此特性來實作初始化的排序。該特性會用于進行DOM元素值的比較,緊接着利用sort方法進行排序。其實說則是調用JQuery中的sort方法,最終還是調用js中的sort方法而已。我們需要對清單進行反轉,需要以下幾步。
(1)定義一個全局變量。
為什麼要定義全局變量?此變量用來儲存排序的狀态(asc or desc)。
(2)用JQuery來選擇清單中的所有元素。
(3)運作JQuery中sort方法來進行排序。
(4)通過detach方法來重新将清單attach到父節點中。
下面給出整個代碼。
我們來示範一下:
當然在用戶端利用sort不僅僅是反轉,還可以排序,如下人員資訊清單。
同理擷取上述data-name特性來進行人名排序。
本文轉自xsster51CTO部落格,原文連結:http://blog.51cto.com/12945177/1932199 ,如需轉載請自行聯系原作者