ui-grid columnDefs：如何将单元格内容转换为用户友好且数据函数的某个值？

Question

我有这个==>

$scope.uiGrid306 = {
    rowTemplate:rowtpl,
    columnDefs: [{
        field: '_ab_area', name: 'Area', width: "7%"
        , filter: { type: uiGridConstants.filter.SELECT, selectOptions: AREAS } 
        }, { ...

        }, {
        field: '_ab_x_style', name: 'Groups', width: "5%"
        , filter: { type: uiGridConstants.filter.SELECT, selectOptions: RISKS, condition: uiGridConstants.filter.EXACT
        } 
    } 
    ]//columnDefs
    , enableFiltering: true
};//-->gridOptions

但是我的 _ab_x_style 的数据并不像我希望的那样对用户友好。所以我需要一个函数来 return 将这些数据翻译成用户友好的单词。问题是如何？？？

Answer 1

为此，您需要对单元格内容应用 cellFilter。以及用于下拉选项的翻译功能，其中也包含那些非用户友好的数据。

cellFilter 是应用于每个单元格内容的过滤器。

$scope.uiGrid306 = {
    rowTemplate:rowtpl,
    columnDefs: [{
        field: '_ab_area', name: 'Area', width: "7%"
        , filter: { type: uiGridConstants.filter.SELECT, selectOptions: AREAS } 
        }, { ...

        }, {
        field: '_ab_x_style', name: 'Groups', width: "5%", cellFilter: 'TranslateMe'
        , filter: { type: uiGridConstants.filter.SELECT, selectOptions: RISKS, condition: uiGridConstants.filter.EXACT
        } 
    } 
    ]//columnDefs
    , enableFiltering: true
};//-->gridOptions

在您的 angular 控制器之后，您通过

实现该过滤器

Yours.controller('BodyController', function($scope, $http, $filter, uiGridConstants, $timeout, $resource) {

})
.filter( 'TranslateMe', function (){
    return(function(value){
        return((value=='dataExcep'?'red':(value=='dataExcepLblueNoVal'?'blue':(value=='dataExcepYellowRevHi'?'yellow':(value=='dataExcepNew'?'aqua':'neutral')))));
    });
});

然后，对于您的下拉选项，您还必须应用一个函数

function TranslateMe(value){
    return((value=='dataExcep'?'red':(value=='dataExcepLblueNoVal'?'blue':(value=='dataExcepYellowRevHi'?'yellow':'neutral'))));
}

为您的选择建设

function loadOptions( $scope, serverdata ){

    _.forEach( _.sortBy( _.uniq( _.pluck( serverdata, '_ab_x_style' ))  ), function ( eachOpt )    {
        RISKS.push( { value: eachOpt, label: TranslateMe(eachOpt) } )
    } );
    $scope.uiGrid306.columnDefs[10].filter.selectOptions = RISKS;
}

结果（而不是用户不友好的数据，我有颜色的名称）--

ui-grid columnDefs：如何将单元格内容转换为用户友好且数据函数的某个值？

ui-grid columnDefs : how to translate cell content to some value which is user-friendly and a function of the data?

angular-ui-grid

ui-grid