J'ai réussi à trouver une solution en implémentant des méthodes qui modifient dynamiquement la hauteur du conteneur. Dans le contrôleur, j'ai d'abord les variables qui initialiser seront utilisées par la suite dans JS et le modèle en utilisant ng style:
//===================================================
// Initalize height that will be altered later based
// on tree expand/collapse events
//===================================================
var row_height = 30; // use this to set height everywhere
$scope.height = row_height;
$scope.height_px = row_height + 'px'; // used in template with ng-style
Puis, tout initialiser les options de la grille de l'arborescence, on peut faire référence à row_height. Nous ajoutons également la logique d'ajouter ou déduire la hauteur en fonction de rowExpanded et rowCollapsed événements dans les options:
$scope.gridOptions = {
rowHeight: row_height,
enableSorting: true,
enableFiltering: false,
//.....continue other options.....
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
// Add container height for row expanded
$scope.gridApi.treeBase.on.rowExpanded(null, function(row) {
addHeight(row.treeNode.children.length);
});
// Deduct container height for row collapsed after considering
// all child node expanded state
$scope.gridApi.treeBase.on.rowCollapsed(null, function(row) {
// get number of children that are already expanded
var count = row.treeNode.children.length;
for(var i=0; i < row.treeNode.children.length; i++) {
count += getChildCount(row.treeNode.children[i]);
}
deductHeight(count);
});
}
}
Nous ajoutons ensuite les méthodes de commande qui sont nécessaires pour addHeight(), deductHeight() et getChildCount() au travail:
// Method to add height of container dynamically based on number of rows
var addHeight = function (num_rows) {
$scope.height += num_rows * row_height;
$scope.height_px = $scope.height + 'px';
};
// Method to deduct height of container dynamically based on number of rows
var deductHeight = function (num_rows) {
$scope.height -= num_rows * row_height;
if($scope.height <= 0) {
$scope.height = row_height;
}
$scope.height_px = $scope.height + 'px';
};
// Method to get count of expanded child rows for a given node (used recursively)
var getChildCount = function (node) {
var count = 0;
if(node.state == 'expanded') {
// change the state to collapsed for all child nodes
node.state = 'collapsed';
count += node.children.length;
for(var i=0; i < node.children.length; i++) {
count += getChildCount(node.children[i]);
}
return count;
} else {
return 0;
}
};
Notez que nous obtenons récursivement le nombre de nœuds lorsque nous réduisons un nœud. Nous modifions également l'état des sous-noeuds pour les réduire afin que la hauteur soit calculée correctement la prochaine fois.
Enfin dans le modèle, nous devons référencer le $ scope.height_px qui donne la hauteur dynamique pour le conteneur. Nous faisons cela en définissant ng-style="{ 'height': height_px }" comme suit:
<div id="gridTree-1" ui-grid="gridOptions" class="grid" ui-grid-tree-view ui-grid-auto-resize ng-style="{ 'height': height_px }"></div>
Un problème que j'ai rencontré après cela était que le défilement de la souris a cessé de fonctionner quand il a été placé sur le dessus de la grille. Ce problème a apparemment une solution comme suggéré here. Toutefois, le problème réel concerne la désactivation de la fonctionnalité de défilement dans ui-grid.js. Dans la version 3.1.1 ligne 2721 lit event.preventDefault();. J'ai dû commenter cette ligne pour que le parchemin fonctionne de nouveau normalement.