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

Question

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

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

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

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

sortFn

Sets the sort function for the column. Useful when you have data that is formatted in an unusual way or if you want to sort on an underlying data type. Check the MDN sort docs for examples

自定义排序函数在点击列排序时接收显示值，但我希望按年龄排序。如果我在排序函数中有可用的行，我可以对同级单元格进行排序，如下所示:

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}} 和您可能拥有(或不拥有)的任何自定义过滤器。