Question

Ember中有一个多排序表吗？像你在excell可以做的事情？

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

Answer 1

我认为Ember Table正是您所寻找的。

Ember Table是一款功能表，适用于需要为其应用提供完整，完全可自定义的表组件的用户。它具有灵活性，可扩展性和符合人体工程学的特点，适合日常使用。

Ember Table Source

Answer 2

只需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(":")]);
        }
    }
});

HBS ：

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

灰烬 - 多排序表

2 个答案: