簡單燼表頭排序

Question

我有，我有一個表中的餘燼應用。我試圖做一個簡單的列標題排序，但似乎無法讓它工作或找到任何體面的例子如何做到這一點。任何援助將不勝感激。

links.hbs：

<thead> 
    <tr> 
     <th {{action "sortBy" "linkID"}}>ID</th> 
     <th {{action "sortBy" "name"}}>NAME</th> 
     <th {{action "sortBy" "description"}}>DESCRIPTION</th> 
     <th {{action "sortBy" "url"}}>URL</th> 
     <th {{action "sortBy" "effDate"}}>EFFECTIVE DATE</th> 
     <th {{action "sortBy" "endDate"}}>END DATE</th> 
     <th {{action "sortBy" "secr"}}>SECURITY RESOURCE</th>   
    <tr> 
</thead> 

links.js（控制器）：

import Ember from 'ember'; 

export default Ember.ArrayController.extend({ 
    actions:{ 
      sortBy: function(property) { 
       alert('Hello'); 
       this.set('sortProperties', [property]); 
       this.set('sortAscending', !this.get('sortAscending')); 
      } 
    } 

}); 

Answer 1

我在這裏把一個簡單的例子給你：http://jsbin.com/yilucefuwi/1/edit?html,js,output

很難告訴你」在沒有看到你的tbody的情況下重做錯誤，以及如何分配陣列控制器的內容。 你確定你的#each塊通過項目控制器，而不是直接在模型迭代？

Answer 2

假設您遍歷model建表，最簡單的方法（有改動你的代碼的最低金額），你可以做到這一點只是到model到arrangedContent每次時間排序設置（當sortedProperties變化） ：

控制器：

export default Ember.ArrayController.extend({ 
    sortProperties: ['name'], 
    sortAscending: false, 

    actions:{ 

     sortBy: function(property) { 
      this.set('sortProperties', [property]); 
      this.toggleProperty('sortAscending'); 
      this.set('model', this.get('arrangedContent')); // set the model to the sorted array 
     } 
    } 
}); 

模板：

<table> 
    <thead> 
     <tr> 
      <th {{action "sortBy" "linkID"}}>ID</th> 
      <th {{action "sortBy" "name"}}>NAME</th> 
      <th {{action "sortBy" "description"}}>DESCRIPTION</th> 
      <th {{action "sortBy" "url"}}>URL</th> 
      <th {{action "sortBy" "effDate"}}>EFFECTIVE DATE</th> 
      <th {{action "sortBy" "endDate"}}>END DATE</th> 
      <th {{action "sortBy" "secr"}}>SECURITY RESOURCE</th> 
     </tr> 
    </thead> 
    <tbody> 
    {{#each item in model}} 
     <tr> 
      <td>{{item.linkID}}</td> 
      <td>{{item.name}}</td> 
      <td>{{item.description}}</td> 
      <td>{{item.url}}</td> 
      <td>{{item.effDate}}</td> 
      <td>{{item.endDate}}</td> 
      <td>{{item.secr}}</td> 
     </tr> 
    {{/each}} 
    </tbody> 
</table> 

Here is a sample

Here is a full demo

如果您需要自定義比較函數（例如比較日期時），您可以覆蓋sortFunction鉤和排序比較元素時灰燼會自動調用它。傳遞到sortFunction的參數是與sortProperties的內容對應的屬性值。

例如，對於陣列[ {name: "bob"}, {name: "john"} ]：

// ... 
sortProperties: ['name'], 
sortFunction: function(propA, propB) { 
    // propA === "bob" 
    // propB === "john" 
    if (propA < propB) { 
     return -1; 
    } 
    if (propA > propB) { 
     return 1; 
    } 
    return 0; // a must be equal to b 
} 
// ...