2011-09-25 66 views
4

我正在嘗試使用tinysort作爲我使用jquery mobile構建的移動應用程序的一部分。我的應用程序在用戶位置附近找到位置,我希望能夠快速地對結果進行排序,而不必花費時間重新查詢數據庫。Tinysort按多個屬性排序(多於1)

所以,我想要做的就是能夠使用tinysort重新排序結果的基礎上,如果用戶有一個最喜歡的地方在該地區,然後通過距離,另外我想能夠按屬性排序「beenthere」如果用戶已標記他們去過某個地方。

這就是我想做的事: 按收藏:

$("ul#places>li").tsort('',({order:"desc",attr:"myfav"},{order:"asc",attr:"dist"})); 

排序有去過:

$("ul#places>li").tsort('',({order:"desc",attr:"beenthere"},{order:"asc",attr:"dist"})); 

排序默認://這是很簡單的工作沒有問題:

$("ul#places>li").tsort('',{order:"desc",attr:"dist"}); 

使用默認的列表順序如:

<ul id="places"> 
    <li myfav="0" beenthere="0" dist=".02">Hot Dog Stand</li> 
    <li myfav="1" beenthere="0" dist=".08">Joe's Shack</li> 
    <li myfav="0" beenthere="1" dist=".10">Frick frack</li> 
    <li myfav="1" beenthere="1" dist=".15">Mama's</li> 
</ul> 

排序最愛應該返回:

  1. Joe的小屋
  2. 媽媽的
  3. 熱狗
  4. 弗裏克弗蘭克•

排序在那裏應該返回:

  1. 弗裏克弗蘭克•
  2. 媽媽的
  3. 熱狗
  4. Joe的小屋

然後回按距離排序:

  1. 熱狗
  2. Joe的小屋
  3. Frick frack
  4. 媽媽的

我呼籲tsort的上面就是不能與多個屬性選擇和工作無論是我的語法錯誤或不能超過一個標準排序。

任何想法,我怎麼可以用tsort或其他解決方案來完成這個想法是讚賞!

回答

0

上面的結果實際上是按照「asc」排序的,而不是「desc」。無論哪種方式,我不認爲TinySort內置了多個屬性排序,所以下一個最好的做法就是結合要排序的屬性。

由於距離是默認排序,我認爲最好是將它與來自其他屬性的數值組合。例如,myfav屬性設置爲「1」以表明它是真實的(我假設這一點,但它看起來像你的意圖)。如果我在距離前面粘貼這個值,它的值最終會高於零的假值 - 這與您想要的排序方向相反,因此我將真值指定爲「0」而不是「1」並且假值爲「9」而不是「0」。我知道這聽起來很混亂,但檢查了這一點:

排序最愛:

Location   fav been dist combined 
1. Joe's Shack 1 0 .08 0.08 
2. Mama's   1 1 .15 0.15 
3. Hot Dog Stand 0 0 .02 9.02 
4. Frick frack 0 1 .10 9.10 

排序在那裏:

Location   fav been dist combined 
1. Frick frack 0 1 .10 0.10 
2. Mama's   1 1 .15 0.15 
3. Hot Dog Stand 0 0 .02 9.02 
4. Joe's Shack 1 0 .08 9.08 

我希望講清楚......反正這裏是一個demo,其中I取得的排序順序切換,以及將碼我使用:

var list = $("ul#places>li"), 
    sortit = function(el, att){ 
     $(el).toggleClass('desc'); 
     var combo, 
      order = $(el).is('.desc') ? 'desc' : 'asc'; 
     // make combo attribute 
     if (att !== 'dist') { 
      list.each(function(){ 
       // attr value = 1 means true, so assign it as a zero 
       // attr value = 0 means false, so assign it as a nine 
       // these numbers + distance, makes sure the lower 
       // values are sorted first 
       combo = $(this).attr(att) === '1' ? '0' : '9'; 
       $(this).attr('combo', combo + $(this).attr('dist')); 

      }); 
      att = 'combo'; 
     } 
     list.tsort('',({order:order,attr:att})); 
    }; 

// Sort by favorite: 
$('button:contains(Fav)').click(function(){ sortit(this, 'myfav'); }); 

// Sort by favorite: 
$('button:contains(Been)').click(function(){ sortit(this, 'beenthere'); }); 

// Sort by default 
$('button:contains(Dist)').click(function(){sortit(this, 'dist'); }); 
+0

哦,我忘了提及,最好使用以'data-'開始的屬性更符合HTML5規範,所以使用'data-myfav','data-beenthere'和'data-dist'代替你現在擁有的東西。 – Mottie

+0

偉大的解決方案 - 謝謝!我做的唯一的調整是我增加了999而不是9,因爲距離以英里爲單位,所以我想確保它總是正確排序。我也刪除了排序順序的切換。 – Joshua

6

予理解的M ottie的解決方案工作,但似乎有點複雜......調用tsort的兩次爲我工作:

​​

在你的情況,這將會是(如果''只是指的是選定的項目,你可以刪除他們):

$("ul#places>li").tsort({order:"desc",attr:"myfav"}) 
        .tsort({order:"asc",attr:"dist"}) 
$("ul#places>li").tsort({order:"desc",attr:"beenthere"}) 
        .tsort({order:"asc",attr:"dist"}) 

也可以使用HTML5的data-attrname樣式,正如Mottie建議的那樣。您可以在tsort內始終使用data: attrname

希望它可以幫助你或他人!