排序基本在NG-网格数据 [英] Sort on underlying data in ng-grid

问题描述

我要显示在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排序为文档实例

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

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

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 例如提供。

Any suggestions how I can sort by 'age' when the 'ageWord' column is sorted? Example available on plnkr.

推荐答案

您需要定义列作为一个对象，并定义的 cellTemplate 。然后在你的sortFn（使用age属性<一个href=\"http://plnkr.co/edit/qmBsneZ3HmFRKSkjbBWU?p=$p$pview\">http://plnkr.co/edit/qmBsneZ3HmFRKSkjbBWU?p=$p$pview):

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-网格数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！