前言

排序?qū)τ谖覀兪窃偈煜げ贿^(guò)了，在絕大數(shù)應(yīng)用程序中都會(huì)有這樣一個(gè)場(chǎng)景：當(dāng)我們從服務(wù)器端獲取一個(gè)列表時(shí)，在界面上進(jìn)行渲染，我們可以會(huì)依賴于某一個(gè)規(guī)則來(lái)進(jìn)行排序，當(dāng)然此時(shí)絕大多數(shù)會(huì)再次與服務(wù)器進(jìn)行交互來(lái)進(jìn)行重新渲染列表到客戶端，這樣做未嘗不可，但是在有些情況下，我們既不需要利用框架也不需要重新生成列表到客戶端，明明可以在客戶端進(jìn)行，達(dá)到我們的目的，為何要再一次發(fā)送請(qǐng)求到服務(wù)器呢？下面我們來(lái)看看。

話題

我們首先看看在w3c中js的sort方法。

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
document.write(arr.sort())

</script>

結(jié)果輸出：

George,John,Thomas,James,Adrew,Martin
Adrew,George,James,John,Martin,Thomas

如果調(diào)用該方法時(shí)沒(méi)有使用參數(shù)，將按字母順序?qū)?shù)組中的元素進(jìn)行排序，說(shuō)得更精確點(diǎn)，是按照字符編碼的順序進(jìn)行排序，但是我們可以自定義排序規(guī)則。

我們?cè)趕ort方法參數(shù)中自定義排序函數(shù)，如下：

<script type="text/javascript">

function sortNumber(a,b)
{
return a - b
}

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort(sortNumber))

</script>

輸出如下：

10,5,40,25,1000,1
1,5,10,25,40,1000

如上是在w3c中的例子，是不是sort方法就這么簡(jiǎn)單呢？有何實(shí)際用途沒(méi)有呢？

我能想到的實(shí)際場(chǎng)景：在頁(yè)面上渲染一個(gè)列表時(shí)，可能該頁(yè)內(nèi)容比較多，我們需要滾動(dòng)鼠標(biāo)才能看到其他內(nèi)容或者說(shuō)該頁(yè)前幾條內(nèi)容我們已經(jīng)看過(guò)，想看看其他內(nèi)容，此時(shí)我們需要將頁(yè)面內(nèi)容進(jìn)行反轉(zhuǎn)，我們?cè)撊绾巫瞿兀?/p>

利用sort方法對(duì)DOM元素排序

首先我們來(lái)看看界面效果，如下：

上述列表是通過(guò)日期進(jìn)行排序，在右上角有一個(gè)排序圖標(biāo)，我們需要實(shí)現(xiàn)的是點(diǎn)擊該排序圖標(biāo)，來(lái)實(shí)現(xiàn)列表升序和降序的切換。

既然是排序我們首先需要考慮的是要有一個(gè)排序規(guī)則，我們添加一個(gè)排序序號(hào)則可以實(shí)現(xiàn)在客戶端列表的排序或者反轉(zhuǎn)。接下來(lái)我們通過(guò)ASP.NET MVC來(lái)實(shí)現(xiàn)演示sort的反轉(zhuǎn)?？聪乱晥D代碼：

 <div id="MessageList">
 @{
  int count = 0;
  foreach (var m in Model)
  {
  count++;
  <div class="message-list-item" data-sort="@count">
   <div class="main-content">
   <div style="margin-top:20px"><a href="#">@m.title</a></div>
   <div class="q_content">
    <p>@m.body</p>
   </div>
   <div class="q_answeroption" style="border-top: 1px dotted #CCC;padding-bottom: 5px;padding-top: 5px;">
    <div class="lf">
    </div>
    <div class="answer_author">
    <a href="#" class="bluelink">@m.author</a>
    <span class="v-split">|</span>
    @m.postDate
    </div>
   </div>
   </div>
  </div>
  }
 }
 </div>

上述class="message-list-item" 有一個(gè)特性 data-sort ，通過(guò)此特性來(lái)實(shí)現(xiàn)初始化的排序。該特性會(huì)用于進(jìn)行DOM元素值的比較，緊接著利用sort方法進(jìn)行排序。其實(shí)說(shuō)則是調(diào)用JQuery中的sort方法，最終還是調(diào)用js中的sort方法而已。我們需要對(duì)列表進(jìn)行反轉(zhuǎn)，需要以下幾步。

（1）定義一個(gè)全局變量。

  為什么要定義全局變量？此變量用來(lái)保存排序的狀態(tài)（asc or desc）。

（2）用JQuery來(lái)選擇列表中的所有元素。

（3）運(yùn)行JQuery中sort方法來(lái)進(jìn)行排序。

（4）通過(guò)detach方法來(lái)重新將列表attach到父節(jié)點(diǎn)中。

下面給出整個(gè)代碼。

 <script type="text/javascript">
 var sortThread = {};
 $(function () {
  sortThread.sortAscending = true;

  $("#ReverseOrder").on("click", function () {
  sortThread.sortAscending = !sortThread.sortAscending;

  var $msgListItem = $(".message-list-item");

  $msgListItem.sort(function (a, b) {
   var sort1 = a.getAttribute('data-sort') * 1;
   var sort2 = b.getAttribute('data-sort') * 1;

   var sortNum = 1;
   if (!sortThread.sortAscending)
   sortNum = -1;

   if (sort1 > sort2)
   return 1 * sortNum;
   if (sort1 < sort2)
   return -1 * sortNum;

   return 0;
  });

  $msgListItem.detach().appendTo("#MessageList");

  });
 });
 </script>

我們來(lái)演示一下：

當(dāng)然在客戶端利用sort不僅僅是反轉(zhuǎn)，還可以排序，如下人員信息列表。

<ul class="peopleList">
 <li data-name="John Doe">Mr. John Doe</li>
 <li data-name="Trent Richardson">Mr. Trent Richardson</li>
 <li data-name="Cindy Smith">Ms. Cindy Smith</li>
 <li data-name="Bill Williams">Mr. Bill Williams</li>
 <li data-name="Jane Doe">Mrs. Jane Doe</li>
</ul>

同理獲取上述data-name特性來(lái)進(jìn)行人名排序。

總結(jié)

本節(jié)通過(guò)實(shí)際例子來(lái)講述了JQuery中的sort方法。我也是在查資料過(guò)程中看到在客戶端排序的思路，于是進(jìn)行了學(xué)習(xí)并和大家分享下。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論