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);
});
Hope this is what you expected.
这篇关于AngularJS:使用&#39; sortFn&#39;时ng-grid不起作用和&#39;组&#39;的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!