AngularJS ui-grid 数据值和显示值 [英] AngularJS ui-grid data value and display value

问题描述

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

I am looking at using the AngularUI team's new table / grid implementation ui-grid. It looks really great, promising and easy to use.

我有一个问题/问题我在文档中找不到答案一>.

Tho I have a question / problem I can't find the answer to in the documentation.

我想要一列按不同的值排序然后显示的值，我该如何实现?

我有一个 rank 属性，范围从 1 到 10，我想对其进行排序，但我有一个 rank_name我想要显示的属性.

I have a rank property ranging from 1 to 10 which I want to sort on but I have a rank_name property I want to be displayed.

rank 属性将是 data value 而 rank_name 将是列的 display value.

The rank property would be the data value and the rank_name would be the display value for the column.

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

以下面的成员列表为例，rank 属性不应该是它自己的列而是隐藏，rank_name 应该作为它自己的列可见.

Take the following list of members as an example, the rank property should not be its own column but be hidden, the rank_name should be visible as its own column.

但是，如果您尝试将成员从最高等级排序到最低等级，它会按字母顺序排序，而不是按等级编号排序，而等级编号是真正的等级指标.因此将 Aspirant 放在顶部，而不是 Grand Admiral.

But if you try and sort members from highest rank to lowest rank it would sort it alphabetically and not by the rank number which is the real rank indicator. Thus placing the Aspirant at the top and not the 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
};

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

Here is the grid options i currently use, but would like to add a sort value for the column definition for rank.

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

推荐答案

将下面添加到 rank_name columnDef

add below to 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 数据值和显示值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！