UI-grid 分组自动展开

Question

有人知道如何自动扩展正在执行分组的 UI 网格吗？我需要打开网格并开始完全扩展它。

他们的 API 和教程参考解释不够明确，我无法理解。

我的 HTML div

<code>
&lt;div id="grid1" ui-grid="resultsGrid" class="myGrid" ui-grid-grouping&gt;&lt;/div&gt;
</code>

我的 Javascript

$scope.resultsGrid = { ,columnDefs: [ { field:'PhoneNum', name:'Phone'}, { field:'Extension', name:'Extension'}, { name:'FirstName'}, { field:'DeptDesc', grouping: {groupPriority: 0}} ] ,onRegisterApi: function(gridApi) { $scope.gridApi = gridApi; } }

Answer 1

你只需要添加

//expand all rows when loading the grid, otherwise it will only display the totals only
      $scope.gridApi.grid.registerDataChangeCallback(function() {
          $scope.gridApi.treeBase.expandAllRows();
        });

在你的onRegisterApi: function(gridApi)中应该像这样更新onRegisterApi: function(gridApi)，这样你的函数就会像这样

$scope.resultsGrid.onRegisterApi = function(gridApi) {       
      //set gridApi on scope
      $scope.gridApi = gridApi;

      //expand all rows when loading the grid, otherwise it will only display the totals only
      $scope.gridApi.grid.registerDataChangeCallback(function() {
          $scope.gridApi.treeBase.expandAllRows();
        });
    };

或者您可以添加按钮来扩展数据，如this plunker 所示

Answer 2

My Module - I had to add ui.gridl.selection
<pre>
<code>
angular.module('ddApp',['ngRoute','ngSanitize','ngCookies','ngResource','ui.grid.selection'])
</code>    
</pre>

My Controller - Amongh the other Dependency Injected items, I also had to add $timeout
<pre>
<code>
    .controller('myCtrl', function(`$`timeout)){}
</code>
</pre>


<pre>
<code>
$timeout(function(){
    if($scope.gridApi.grouping.expandAllRows){
       $scope.gridApi.grouping.expandAllRows();
    }
});
</code>
</pre>

Answer 3

最接近的类比是选择教程，我们在数据加载完成后选择第一行：http://ui-grid.info/docs/#/tutorial/210_selection

$http.get('/data/500_complex.json')
  .success(function(data) {
    $scope.gridOptions.data = data;
    $timeout(function() {
      if($scope.gridApi.selection.selectRow){
        $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
      }
    });
  });

关键的理解是您不能选择（或展开）尚未加载的数据。因此，您等待数据从 $http 返回，然后将其提供给网格，然后等待 1 个摘要周期让网格摄取数据并呈现它——这就是 $timeout 所做的。然后您可以调用 api 来选择（或在您的情况下展开）数据。

所以对你来说，你可能有：

$http.get('/data/500_complex.json')
  .success(function(data) {
    $scope.gridOptions.data = data;
    $timeout(function() {
      if($scope.gridApi.grouping.expandAllRows){
        $scope.gridApi.grouping.expandAllRows();
      }
    });
  });

如果您使用的是最新的不稳定版本，该调用将更改为 $scope.gridApi.treeBase.expandAllRows。