Автоматическая разметка UI-сетки

Question

Кто-нибудь знает, как автоматически расширять сетку пользовательского интерфейса, которая выполняет группировку? Мне нужна сетка, чтобы открыть ее и начать с ее полного расширения.

Ссылка на API и учебник не дает ясного объяснения для понимания.

Мой HTML ДИВ

<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

Наиболее близкой аналогией будет учебник выбора, в котором мы выбираем первую строку после того, как данные по завершении загрузки: 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 цикл дайджеста для сетки, чтобы глотать данные и отображать их - это то, что делает таймаут $. Затем вы можете вызвать 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 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

вам просто нужно добавить

//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