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

Question

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

Answer 1

我猜你的意思是，如果（例如）你有 "First Name" 和 "Last Name" 列分别显示名字和姓氏，你想在 [=38= 上单击排序] 这实际上按 "First Name"?

的顺序对 table 进行了排序

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

假设您有以下 table:

并且当您对 "Last Name" 列进行排序时，它实际上会按照 "First Name" 列中数据的顺序对 table 进行排序。

假设数据如下：

$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 绑定到firstName 这意味着当对列进行排序时，它是按 firstName.

排序的

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

Answer 2

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

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

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

您可以通过 sortingAlgorithm 属性 为 colDef 指定 sortFunc。

这发生在 ui-grid 版本 3.0.7