Disable/Enable 在 ui- 网格中分组

Question

我有一个 ui 网格，其第一列是：

  columnDefs : [$scope.getGroupIdColumn(),
                $scope.getKlasCodeColumn(),
                $scope.getKlasNummerColumn(),
                $scope.getNaamColumn()
            ]

其中 getGroupIdColumn 是：

    $scope.getGroupIdColumn = function () {
        var result = new Object();
        result["name"] = 'GroupID';
        result["visible"] = false;
        result["type"] = 'number';
        if ($scope.groupingEnabled) {
            console.log("komt toch: " + $scope.speedDial.grouping);
            var grObj = new Object();
            grObj["groupPriority"] = 0;
            result["grouping"] = grObj;
            return result;
        }
        return result;
    }

其他列定义也是这样。

如果groupingEnabled为真，我有分组。如果为假，则不分组。到这里为止，一切正常。

但是

如果我重新定义该列，甚至重新定义所有网格选项，它仍然保持原样。因此，如果我有一个带分组的网格并且我重新定义了所有网格选项，我仍然有带分组的网格。

应该怎么办？

PS：gridApi.core.refresh()、$evalAsync().. 已尝试但没有任何改进。

Answer 1

简直不敢相信这么简单！我将编写我的函数，这将让人们更容易上手：（这里还有 documentation）

在 $scope 中设置 gridApi:

$scope.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;
}

保存您的分组信息：

$scope.groupInfo = $scope.gridApi.grouping.getGrouping();

只需定义这些函数

$scope.groupData = function () {
    if ($scope.groupInfo != undefined) {
        $scope.gridApi.grouping.setGrouping($scope.groupInfo);
    }
    setTimeout(function () {
        $scope.gridApi.treeBase.expandAllRows();
    }, 400);
    $scope.$evalAsync();
}

$scope.ungroupData = function () {
    // if ($scope.groupInfo != undefined) {
        // $scope.groupInfo = $scope.gridApi.grouping.getGrouping();
    // }
    $scope.gridApi.grouping.clearGrouping();
}

Answer 2

对于我的情况，我需要切换分组，我尝试了你的答案，但它对我不起作用，所以我稍微改变了它。

$scope.groupData = function () {
    $scope.gridApi.grouping.groupColumn('columnName');
    $timeout(function(){
      $scope.gridApi.treeBase.expandAllRows();
    }, 300);
}

工作示例http://plnkr.co/edit/AtcLSsqqnSaFeLfOEJhc?p=preview

Disable/Enable 在 ui- 网格中分组

Disable/Enable Grouping in ui-grid

grouping

angularjs

ng-grid

angular-ui-grid