问题描述
我想知道是否可以自定义排序和分组以使用同一列.我在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);
});
Hope this is what you expected.
这篇关于AngularJS:使用&#39; sortFn&#39;时ng-grid不起作用和&#39;组&#39;的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!