Question

我希望在ng-grid单元格中显示格式化值，但要对未显示的相关数值进行排序。

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

从上面的示例中，我将显示ageWord列，但希望对年龄列进行排序。

用于排序ng-grid指令的docs表示我可以提供自定义函数来对基础数据进行排序：

sortFn

设置列的排序功能。当您拥有以不寻常方式格式化的数据或者您希望对基础数据类型进行排序时非常有用。查看MDN排序文档以获取示例

自定义排序功能在单击列排序时接收显示值，但我希望对年龄进行排序。如果我在sort函数中有可用行，我可以对兄弟单元格进行排序，如下所示：

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

当'ageWord'列被排序时，我可以按“年龄”排序吗？可用示例on plnkr。

Answer 1

您需要将列定义为对象并定义 cellTemplate 。然后在sortFn（http://plnkr.co/edit/qmBsneZ3HmFRKSkjbBWU?p=preview）中使用age属性：

// 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默认为：

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

所以您需要做的就是使用{{COL_FIELD.age}}以及您可能（或可能不）拥有的任何自定义过滤器。

Answer 2

您可以在sortInfo中使用gridOptions，如下所示：

 $scope.gridOptions = { 
  data: 'gridData',
    columnDefs: [
      {field: 'name', displayName: 'Name'}, 
      {field:'ageWord', displayName: 'Age'}
    ],
    sortInfo: {
      fields: ['age'],
      directions: ['asc']
    }
};

对ng-grid中的基础数据进行排序

2 个答案: