是否可以使用Angular UI Grid将列的排序绑定到与其显示属性不同的属性？

Question

我只是想知道是否有人知道使用Angular UI Grid以与另一列相同的顺序对列进行排序的方法。

Answer 1

我猜你的意思是，如果（例如）你有“名字”和“姓氏”列分别显示名字和姓氏，你想点击排序“姓氏”，这实际上排序表格按“名字”的顺序排列？

如果是这样，您可以使用单元格模板完成此操作。

假设您有下表：

当您对“姓氏”列进行排序时，它实际上将按照“名字”列中的数据顺序对表格进行排序。

假设以下数据：

$scope.gridOptions.data = [{
    "firstName": "David",
    "lastName": "Carney",
}, {
    "firstName": "Bob",
    "lastName": "Wise",
}, {
    "firstName": "Peter",
    "lastName": "Thompson",
}];

按如下方式定义columnDefs：

$scope.gridOptions.columnDefs = [{
    name: 'firstName',
    field: 'firstName'
}, {
    name: 'lastName',
    field: 'firstName',
    cellTemplate: '<div class="ui-grid-cell-contents">{{row.entity.lastName}}</div>'
}];

第二列的列定义将列命名为“Last Name”，单元格模板确保单元格中显示lastName属性，但是当列field绑定到{{1它意味着当列被排序时，它在firstName上排序。

可以找到一个例子here。对第二列（姓氏）进行排序，这些行实际上将按第一列（名字）的顺序排序。

Answer 2

Grid将偶数行作为参数与字段值一起传递给sort函数。它调用sort函数，如下所示：

  sortFn(propA, propB, rowA, rowB, direction);

您可以使用此额外信息对数据进行适当排序。

您可以通过colDef的sortedAlgorithm属性指定sortFunc。

这是从ui-grid版本3.0.7

发生的