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

问题

I wonder if it is possible to customize the sorting and grouping to use the same column. I made an example in Plunker where the 'groups' option is commented out. When this line is uncommented the grid does not display any records.

$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 Plunker: http://plnkr.co/edit/krlAsVr7NM30fFljyaQH

Thank U.

回答1:

I too faced a same kind of issue in my application and i have been solved by moving the columnDefs definition to the $scope and used in the 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]

Modified the columnDefs's field property from complex to complex.name and in the cellTemplate {{COL_FIELD.name}} to {{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]

I can't able to do by using sortFn, instead of that i have added the sortInfo, useExternalSorting and created my customized sortData function to achieve this.

By default, i have set the Name as the sorting field with asc order. So it sorted the Name as well as the Order in asc. Screen shot as below:

When user manually set the descending order, the Name and Order fields are in desc order. Screen shot as below:

Can you please check the updated plunker: http://plnkr.co/edit/itF5CdHoptP6Nij36J8T

UPDATE 3: [MAR 18' 2014]

I added your question as well as my code.

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 ).

So i sorted by requested field and one more time sorted by the grouping field with asc order to retain the Grouping column wont change for any field sort.

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

Hope this is what you expected.

来源：https://stackoverflow.com/questions/28772339/angularjs-ng-grid-does-not-work-when-using-sortfn-and-groups

标签

angularjs

ng-grid