Question

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

他们的API和教程参考文献没有明确解释，让我理解。

我的HTML div


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

我的Javascript

    {{1}}

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();
        });

<{1>}中的

应该像onRegisterApi: function(gridApi)一样更新，这样你的功能就像这样

onRegisterApi: function(gridApi)

或者您可以添加按钮以展开this plunker

中显示的数据

Answer 2

最接近的类比是选择教程，我们在数据加载完成后选择第一行：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。

Answer 3

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>

UI网格分组自动扩展

3 个答案: