Question

我正在考虑使用AngularUI小组的新表/网格实施ui-grid。它看起来非常棒，很有前途且易于使用。

我有一个问题/问题我在documentation找不到答案。

我想要一个列对显示的值进行排序，我该如何实现？

我有一个rank属性，范围从1到10，我想要排序，但我想要显示rank_name属性。

rank属性为data value，rank_name属于该列的display value。

var members = [
    {
        name: 'Member 1',
        rank: 1,
        rank_name: 'Grand Admiral'
    },
    {
        name: 'Member 2',
        rank: 2,
        rank_name: 'Aspirant'
    }
]

以以下成员列表为例，rank属性不应该是自己的列，但要隐藏，rank_name应该作为自己的列可见。

但是如果你尝试将成员从最高等级排序到最低等级，它会按字母顺序排序，而不是按真实排名指标排名。因此，Aspirant位于顶部，而不是Grand Admiral。

$scope.gridOptions = {
    enableSorting: true,
    enableFiltering: true,
    columnDefs: [
        {field: 'name'},
        {field: 'coords'},
        {field: 'rank_name', name: 'rank'},
        {field: 'score'},
        {field: 'strength'},
        {field: 'level'},
        {field: 'outposts'},
        {field: 'public_note'}
    ],
    data: members
};

以下是我目前使用的网格选项，但是想为排名的列定义添加排序值。

{display_field: 'rank_name', name: 'rank', value_field: 'rank'},

Answer 1

在角度模块中编写rankToString过滤器

module.filter('rankToString', function () {
    return function(input) {
        switch(input) {
        case 1:
            return 'Grand Admiral';
        case 2:
            return 'Aspirant';
        }
    };
}

对于rank的

columnDef，您仍然按等级编号排序，但在视口中显示字符串值。所以你可以转储rank_name提交。

{
    field: 'rank',
    sort: {
        direction: uiGridConstants.ASC
    },
    cellFilter: 'rankToString'
}

Answer 2

将以下内容添加到rank_name columnDef

sort: {
    direction: uiGridConstants.ASC
},
sortingAlgorithm: function(a, b) {
    var rank = {
        'Grand Admiral': 1,
        'Aspirant': 2
    };

    if (rank[a] > rank[b]) {
        return 1;
    }

    if (rank[a] < rank[b]) {
        return -1;
    }

    return 0;
}

AngularJS ui-grid数据值和显示值

2 个答案: