余烬-多排序表

我想 Ember Table 是你要找的。

Ember Table是一个为那些需要一个完整的、完全可定制的应用程序表组件的用户创建的power Table。它是建立灵活,可扩展性和人机工程学的日常使用。

• Ember Table Source

它可以通过简单的 sortDefinition and Ember.computed.sort

Ember Twiddle

JS公司 :

import Ember from 'ember';

export default Ember.Controller.extend({
    data:function(){
        return [{
                     "marks":90,
                     "totalmarks":100,
                     "percentage":90,
                             "status":"pass"
                  },
                  {
                     "marks":80,
                     "totalmarks":100,
                     "percentage":80,
                     "status":"pass"
                  },
                  {
                     "marks":50,
                     "totalmarks":50,
                     "percentage":100,
                     "status":"pass"
                  },
                  {
                     "marks":30,
                     "totalmarks":40,
                     "percentage":75,
                     "status":"fail"
                  }];
    }.property(),
    sortDefinition : [],
    sortedData: Ember.computed.sort('data', 'sortDefinition'),
    columns:function(){
        return ["marks","totalmarks","percentage","status"];
    }.property(),

    actions:
    {
        sortByColumn:function(columnname)
        {
            var sortdef = this.get("sortDefinition");
            if(sortdef.length)
            {
                sortdef = sortdef[0].split(":");
                sortdef[1] = sortdef[0]==columnname ? sortdef[1]=="asc"?"desc":"asc":"asc";
                sortdef[0] = columnname;
            }
            else
            {
                sortdef.push([columnname,"asc"].join(":"));
            }
            this.set("sortDefinition",[sortdef.join(":")]);
        }
    }
});

哈佛商学院 :

<table>
    <tr>
        {{#each columns as |column|}}
            <th {{action "sortByColumn" column}}>{{column}}</th>
        {{/each}}
    </tr>
    {{#each sortedData as |value|}}
        <tr><td>{{value.marks}}</td>
        <td>{{value.totalmarks}}</td>
        <td>{{value.percentage}}</td>
        <td>{{value.status}}</td></tr>
    {{/each}}
</table>

CSS :

table, tr, th, td{
    border:1px solid #000;
}
th{
    cursor:pointer;
}