AngularJS:ng-grid 在使用 'sortFn' 和 'groups' 时不起作用

Question

我想知道是否可以自定义排序和分组以使用同一列。我在 Plunker 中做了一个例子，其中注释掉了 'groups' 选项。取消注释此行时，网格不显示任何记录。

$scope.myData = [{complex:{name: "Felipe",  order: 3}},
                 {complex:{name: "Luciano", order: 1}},
                 {complex:{name: "Lucílio", order: 2}},
                 {complex:{name: "Joacás",  order: 4}}];

$scope.gridOptions = { 
  data: 'myData',
  groups: ['complex.name'], // does not work when uncommented...
  groupsCollapsedByDefault: false,
  columnDefs: [{
    field: 'complex',
    cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{COL_FIELD.name}}</span></div>',
    displayName: 'Name',
    sortFn: funcOrder}]
};

var funcOrder = function sort(a, b) {
if (a.order < b.order) {
    return -1;
} else if (a.order > b.order) {
    return 1;
}
else {
    return 0;
}

链接插件:http://plnkr.co/edit/krlAsVr7NM30fFljyaQH

谢谢你

Answer 1

我在我的应用程序中也遇到了同样的问题，我已经通过将 columnDefs 定义移动到 $scope 并在 gridOptions 中使用来解决。

$scope.columnDefinitions = [{
    field: 'complex',
    cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{COL_FIELD.name}}</span></div>',
    displayName: 'Name',
    sortFn: funcOrder
}, {
    field: 'complex',
    cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{COL_FIELD.order}}</span></div>',
    displayName: 'Order'
}];

$scope.gridOptions = {
    data: 'myData',
    groups: ['complex.name'], // Working when uncomment
    groupsCollapsedByDefault: false,
    enableSorting: true,
    columnDefs: 'columnDefinitions'
};

UPDATE 1 : [Mar 17' 2015]

将 columnDefs 的 field 属性从 complex 修改为 complex.name 并在 cellTemplate {{COL_FIELD.name}} 到 {{COL_FIELD}}

$scope.gridOptions = {
    data: 'myData',
    groups: ['complex.name'],
    groupsCollapsedByDefault: false,
    enableSorting: true,
    columnDefs: [{
        field: 'complex.name',
        cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{COL_FIELD}}</span></div>',
        displayName: 'Name',
        sortFn: funcOrder
    }, {
        field: 'complex.order',
        cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{COL_FIELD}}</span></div>',
        displayName: 'Order'
    }]
};

UPDATE 2 : [Mar 17' 2015]

我无法使用 sortFn 来做到这一点，我添加了 sortInfo、useExternalSorting 并创建了自定义的 sortData实现这一目标的功能。

默认情况下，我已将名称 设置为asc 顺序的排序字段。所以它在 asc 中对 Name 和 Order 进行了排序。截图如下:

当用户手动设置降序时，Name 和Order 字段为desc 顺序。截图如下:

能否请您检查更新的 plunker:http://plnkr.co/edit/itF5CdHoptP6Nij36J8T

UPDATE 3: [MAR 18' 2014]

我添加了你的问题和我的代码。

1 ) When the controller is started, should be originator for all grouping columns.

2 ) When the user clicks on another column, the sort need to keep the grouping ( ASC ) and the column he clicked ( ASC or DESC ).

所以我按请求的字段排序，并再次按分组字段排序，使用asc为了保留分组列不会因任何字段排序而改变。

angular.forEach(fields, function(item, i) {
    filterData = orderBy(filterData, [fields[i]], directions[i] == 'desc' ? true : false);
    filterData = orderBy(filterData, ['complex.name'], false);            
}); 

New Plunker for revised code

希望这是您所期望的。