本文介绍了AngularJS:使用' sortFn'时ng-grid不起作用和'组'的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想知道是否可以自定义排序和分组以使用同一列.我在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;} 

链接插入器:

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

因此,我按照请求的字段进行了排序,并又用 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'
};

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

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

I added your question as well as my code.

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:使用&amp;#39; sortFn&amp;#39;时ng-grid不起作用和&amp;#39;组&amp;#39;的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 11:12
查看更多