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

问题描述

我期待在使用 AngularUI 球队的新表/格实施的 UI网 。它看起来真的很棒，有前途的和易于使用。

芹苴我有一个问题/问题，我不能在文档中找到答案

我要列进行排序在不同的值，则显示的人，我怎么能做到这一点？

我有一个等级属性从 1 到 10 我要作为排序依据，但我有一个 RANK_NAME 属性我想被显示出来。

的等级属性将是数据值和 RANK_NAME 将是显示值为列。

  VAR成员= [
    {
        名称：'会员1'，
        排名：1，
        RANK_NAME：大将军
    }，
    {
        名称：'会员2'，
        排名：2
        RANK_NAME：'上进'
    }
]
 

以成员下面的列表为例，在等级属性不应该是自己的列，但被隐藏在 RANK_NAME 应作为自己的列可见。

但是，如果你尝试从排序最高等级为最低级成员，将在排名哪个才是真正的排名指标按字母顺序，而不是对它进行排序。因此，放置上进顶部，而不是盛大海军上将。

  $ scope.gridOptions = {
    enableSorting：真实，
    enableFiltering：真实，
    columnDefs：
        {字段：名称}，
        {场：COORDS}，
        {场：'RANK_NAME'，名称：军衔}，
        {场：'得分'}，
        {场：'强度'}，
        {场：'级别'}，
        {场：'前哨'}，
        {场：public_note'}
    ]
    数据：成员
};
 

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

  {display_field：RANK_NAME'，名称：'排名'，value_field：军衔}，
 

解决方案

下面加入 RANK_NAME columnDef

 排序：{
    方向：uiGridConstants.ASC
}，
sortingAlgorithm：功能（A，B）{
    VAR等级= {
        大将军：1，
        '上进'：2
    };    如果（秩[A]＆GT;秩[B]）{
        返回1;
    }    如果（秩[A] LT;秩[B]）{
        返回-1;
    }    返回0;
}
 

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.

I want a column to sort on a different value then the one displayed, how can I achieve that?

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.

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'
    }
]

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.

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'},

解决方案

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