排序基本在NG-网格数据

问题描述

我要显示在NG-网格单元格式化的价值，但在排序相关数值不会显示。

I wish to display a formatted value in a ng-grid cell, but sort on a related numeric value not displayed.

var myData1 = [{
 name: "Moroni",
  age: 50,
  ageWord: "Fifty"
}

从上面的例子中，我将显示ageWord列，但要排序的列年龄

From the above example I would display the ageWord column, but wish to sort on the age column.

借助进行排序的NG-电网指令表明我可以提供一个自定义的功能，基础数据整理

The docs for sorting an ng-grid directive indicate I can provide a custom function to sort underlying data:

sortFn

设定列的排序功能。有用的，当您有一种不寻常的方式格式化的数据，或者，如果你想的排序上的基本数据类型即可。检查MDN排序为文档实例

自定义排序函数接收显示值单击该列排序的时候，但我想排序的时代。如果我有可用的行中的排序功能，我可以排序的兄弟姐妹细胞，是这样的：

the custom sort function receives the display values when the column sort is clicked, but I wish to sort on the age. If I had the row available in the sort function I could sort on the sibling cell, something like this:

sortFn: function(a, b) {
    var ageA = a.getProperty('age');
    var ageB = b.getProperty('age');
    return ageA-ageB;
  }

任何建议如何我可以'年龄'当'ageWord列进行排序排序？在plnkr 例如提供):

You need to define your column as an object and define your cellTemplate. Then use the age property in your sortFn (http://plnkr.co/edit/qmBsneZ3HmFRKSkjbBWU?p=preview):

// main.js
var app = angular.module('myApp', ['ngGrid']);

app.controller('MyCtrl', function($scope) {
    //Notice age is now an object to be used with the cellTemplate
    var myData1 = [{name: "Moroni", age: {age: 50, ageWord: "Fifty"}},
                     {name: "Tiancum", age: {age: 43, ageWord: "Forty-Three"}},
                     {name: "Mildred", age: {age: 70, ageWord: "Seventy"}},
                     {name: "Jacob", age: {age: 27, ageWord: "Twenty-Seven"}}];


    $scope.gridOptions = { 
      data: 'gridData',
       columnDefs: [
        {field: 'name', displayName: 'Name'}, 
        {field:'age', 
         displayName:'Age',
         cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{COL_FIELD.ageWord}}</span></div>',
         sortFn: function (a, b) {
           //compare age property of the object
           if (a.age < b.age) {
             return -1;
           }
           else if (a.age > b.age) {
             return 1;
           }
           else {
             return 0;
           }
         }
       }]
    };

    $scope.gridData = myData1;

});

根据文档，cellTemplate默认为：

According to the docs, cellTemplate defaults to:

<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{COL_FIELD CUSTOM_FILTERS}}</span></div>

因此​​，所有你需要做的是利用{{COL_FIELD.age}}任何自定义过滤器你可能（也可能没有）。

So all you need to do is use {{COL_FIELD.age}} and any custom filters you may (or may not) have.

这篇关于排序基本在NG-网格数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！