ember.js - Ember - 多排序表

Question

Ember 中有多重排序表吗？比如你可以在excel中做什么？

我只见过一个简单的排序和过滤器。 http://crodriguez1a.github.io/ember-sort-filter-table/

标签： ember.js

Answer 1

可以简单地通过sortDefinition 和 Ember.computed.sort来实现

余烬玩弄

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;
}