1

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

4

2 回答 2

2

我猜你的意思是,如果(例如)你有分别显示名字和姓氏的“名字”和“姓氏”列,你想点击“姓氏”上的排序,这实际上对表格进行排序“名字”的顺序?

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

假设您有下表:

在此处输入图像描述

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

假设以下数据:

$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>'
}];

第二列的列定义将列命名为“姓氏”,并且单元格模板确保lastName属性显示在单元格中,但是由于列field绑定到firstName它意味着当列被排序时,它被排序firstName

一个例子可以在这里找到。对第二列(姓氏)进行排序,行实际上将按照第一列(名字)的顺序进行排序。

于 2016-01-27T14:49:17.677 回答
1

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

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

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

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

这发生在 ui-grid 版本 3.0.7

于 2017-01-09T07:43:36.730 回答