AngularJS：NG-格使用“sortFn”和“组”的时候不工作 [英] AngularJS: ng-grid does not work when using 'sortFn' and 'groups'

问题描述

我不知道它是否可以自定义排序和分组使用相同的列。
我在Plunker做出了表率，其中组选项注释掉。当此行被注释掉了网格不显示任何记录。

  $ scope.myData = [{复杂：{名字：费利佩，顺序为：3}}，
                 {复：{名字：卢西亚诺，顺序为：1}}，
                 {复：{名字：Lucílio，顺序为：2}}，
                 {复：{名字：Joacás，顺序为：4}}];$ scope.gridOptions = {
  数据：myData的，
  组：['complex.name']，//不取消注释时，工作...
  groupsCollapsedByDefault：假的，
  columnDefs：[{
    现场：复杂，
    cellTemplate：'＆LT; D​​IV CLASS =ngCellTextNG-CLASS =col.colIndex（）＆GT;＆LT;跨度NG信文本＆GT; {{COL_FIELD.name}}＆LT; / SPAN＆GT;＆LT; / DIV＆GT; '，
    显示名：名称，
    sortFn：funcOrder}]
};VAR funcOrder =功能排序（A，B）{
如果（a.order＆LT; b.order）{
    返回-1;
}否则如果（a.order＆GT; b.order）{
    返回1;
}
其他{
    返回0;
}
 

链接Plunker： http://plnkr.co/edit/krlAsVr7NM30fFljyaQH

感谢ü。

解决方案

我也面临着同一种问题在我的申请，我一直通过移动解决 columnDefs 定义到 $范围和使用 gridOptions 。

  $ scope.columnDefinitions = {[
    现场：复杂，
    cellTemplate：'＆LT; D​​IV CLASS =ngCellTextNG-CLASS =col.colIndex（）＆GT;＆LT;跨度NG信文本＆GT; {{COL_FIELD.name}}＆LT; / SPAN＆GT;＆LT; / DIV＆GT; '，
    显示名：名称，
    sortFn：funcOrder
}，{
    现场：复杂，
    cellTemplate：'＆LT; D​​IV CLASS =ngCellTextNG-CLASS =col.colIndex（）＆GT;＆LT;跨度NG信文本＆GT; {{COL_FIELD.order}}＆LT; / SPAN＆GT;＆LT; / DIV＆GT; '，
    显示名：秩序
}];$ scope.gridOptions = {
    数据：myData的，
    组：['complex.name']，//取消注释工作时
    groupsCollapsedByDefault：假的，
    enableSorting：真实，
    columnDefs：columnDefinitions
};
 

  

更新1：3月17日2015年]

修改了的 columnDefs 字段从复杂到 complex.name ，并在 cellTemplate {{} COL_FIELD.name} 到 {{} COL_FIELD}

  $ scope.gridOptions = {
    数据：myData的，
    组：['complex.name']，
    groupsCollapsedByDefault：假的，
    enableSorting：真实，
    columnDefs：[{
        现场：complex.name'，
        cellTemplate：'＆LT; D​​IV CLASS =ngCellTextNG-CLASS =col.colIndex（）＆GT;＆LT;跨度NG信文本＆GT; {{COL_FIELD}}＆LT; / SPAN＆GT;＆LT; / DIV＆GT;，
        显示名：名称，
        sortFn：funcOrder
    }，{
        现场：complex.order'，
        cellTemplate：'＆LT; D​​IV CLASS =ngCellTextNG-CLASS =col.colIndex（）＆GT;＆LT;跨度NG信文本＆GT; {{COL_FIELD}}＆LT; / SPAN＆GT;＆LT; / DIV＆GT;，
        显示名：秩序
    }]
};
 

  

更新2：3月17日2015年]

我不能能够通过使用做 sortFn ，而不是说我已经添加了的SortInfo ， useExternalSorting 并创造了我定制的sortData函数来实现这一点。

在默认情况下，我已经设置了命名与递增顺序排序字段。因此，它的排序的名称以及在订单在递增。屏幕截图如下：

当用户手动设置降序排列，在名称和订单字段是说明订单。屏幕截图如下：

能否请您检查更新的plunker： http://plnkr.co/edit/itF5CdHoptP6Nij36J8T

  

更新3：[03月18日2014年]

我说你的问题，以及我的code。

  

1）当控制器启动时，应该是发端所有分组列。

  
  

2）当用户点击另一列，则排序需要保持分组（ASC）和他点击列（ASC或DESC）。

所以，我所要求域，并通过在分组字段整理一次整理与递增为了留住分组列不会更改任何现场排序。

  angular.forEach（字段，函数（项目，我）{
    筛选数据=排序依据（筛选数据，[域[I]，方向[I] =='说明'真的？假的）;
    筛选数据=排序依据（筛选数据，['complex.name']，FALSE）;
}）;
 

新Plunker订正code

希望这是你所期望的。

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：NG-格使用“sortFn”和“组”的时候不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！