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

Question

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

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

从上面的例子我将显示ageWord列,但希望对年龄列进行排序.

排序ng-grid指令的文档表明我可以提供自定义函数来对基础数据进行排序:

sortFn

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

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

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

当'ageWord'列被排序时,我可以按"年龄"排序吗？plnkr上提供的示例.

Answer 1

您需要将列定义为对象并定义cellTemplate.然后使用sortFn中的age属性(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默认为:

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