javascript 对 ng-grid 中的基础数据进行排序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20706684/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sort on underlying data in ng-grid
提问by Aaron Roller
I wish to display a formatted value in a ng-grid cell, but sort on a related numeric value not displayed.
我希望在 ng-grid 单元格中显示格式化的值，但对未显示的相关数值进行排序。
var myData1 = [{
name: "Moroni",
age: 50,
ageWord: "Fifty"
}
From the above example I would display the ageWord column, but wish to sort on the age column.
在上面的示例中，我将显示 ageWord 列，但希望对 age 列进行排序。
The docsfor sorting an ng-grid directive indicate I can provide a custom function to sort underlying data:
用于排序 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
设置列的排序函数。当您拥有以不寻常方式格式化的数据或您想对基础数据类型进行排序时，这将非常有用。检查 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:
自定义排序函数在单击列排序时接收显示值，但我希望按年龄排序。如果我在 sort 函数中有可用的行，我可以对同级单元格进行排序，如下所示：
sortFn: function(a, b) {
var ageA = a.getProperty('age');
var ageB = b.getProperty('age');
return ageA-ageB;
}
Any suggestions how I can sort by 'age' when the 'ageWord' column is sorted? Example available on plnkr.
回答by Patrick
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):
您需要将您的列定义为一个对象并定义您的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;
});
According to the docs, cellTemplate defaults to:
根据文档， cellTemplate 默认为：
<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{COL_FIELD CUSTOM_FILTERS}}</span></div>
So all you need to do is use {{COL_FIELD.age}} and any custom filters you may (or may not) have.
因此，您需要做的就是使用 {{COL_FIELD.age}} 以及您可能（或可能没有）拥有的任何自定义过滤器。
回答by Kabb5
You could use sortInfoin your gridOptions, like this:
您可以sortInfo在您的 中使用gridOptions，如下所示：
$scope.gridOptions = {
data: 'gridData',
columnDefs: [
{field: 'name', displayName: 'Name'},
{field:'ageWord', displayName: 'Age'}
],
sortInfo: {
fields: ['age'],
directions: ['asc']
}
};
