AngularJS:使用' sortFn'时ng-grid不起作用和'组' [英] AngularJS: ng-grid does not work when using 'sortFn' and 'groups'

问题描述

我想知道是否可以自定义排序和分组以使用同一列.我在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 = {数据:"myData"，组:['complex.name']，//取消注释时不起作用...groupsCollapsedBy默认值:false，columnDefs:[{字段:复杂"，cellTemplate:'< div class ="ngCellText" ng-class ="col.colIndex()">< span ng-cell-text> {{COL_FIELD.name}}</span></div>'，displayName:'名称'，sortFn:funcOrder}]};var funcOrder = function sort(a，b){如果(a.order< b.order){返回-1;} else if(a.order> b.order){返回1;}别的 {返回0;} 

链接插入器:

更新3:[2014年3月18日]

我添加了您的问题以及代码.

1)启动控制器后，应将其作为所有分组列的始发者.

2)当用户单击另一列时，排序需要保留分组(ASC)和他单击的列(ASC或DESC).

因此，我按照请求的字段进行了排序，并又用 asc 的分组字段进行了排序，以便保留分组"列对于任何字段排序都不会改变.

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

用于修改代码的新柱塞

希望这就是您的期望.

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.

解决方案

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.

这篇关于AngularJS:使用' sortFn'时ng-grid不起作用和'组'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！