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;
}

Link 笨蛋：http://plnkr.co/edit/krlAsVr7NM30fFljyaQH

谢谢你

Answer 1

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

$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 函数来实现此目的。

默认情况下，我已将 Name 设置为 asc 顺序的排序字段。因此它对 Name 以及 asc 中的 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

希望这是您所期望的。

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

AngularJS: ng-grid does not work when using 'sortFn' and 'groups'

angularjs

ng-grid