Charger une grille d'interface utilisateur basée sur la ligne sélectionnée d'une autre grille d'interface utilisateur

Question

J'ai un composant de grille d'interface utilisateur et lorsque vous cliquez sur une ligne, je voudrais charger le contenu d'un autre composant de grille d'interface utilisateur sur la page. Comment écririez-vous une fonction pour indiquer à la grille de mettre à jour la deuxième grille en fonction d'un appel d'api de repos avec le paramètre sélectionné à partir de la première rangée de la grille? A titre d'exemple, la première grille serait une liste d'états et la seconde grille montrerait toutes les villes dans l'état sélectionné.

Answer 1

Voici les étapes pour réaliser ce que vous cherchez.

• Enregistrez le API Grille
• Appel modifyRows
• Mettez votre appel de fonction à l'intérieur du secoundary pour obtenir toutes les lignes sélectionnées appel à l'aide onRowSelection .get SelectedRows().

Voici un exemple rapide:

$scope.yourGridName.onRegisterApi = function (gridApi) { 
    // Set gridApi on scope, if you have more then one grid, 
    // Your grid api name (gApi in this case)must be unique 
    $scope.gApi = gridApi; 

    // Allow row modification 
    $scope.gApi.grid.modifyRows($scope.requestsGrid.data); 

    // On a change of selection 
    gridApi.selection.on.rowSelectionChanged($scope, function (row) { 

     // Get current selected row, current row is an array 
     var currentRow = $scope.gApi.selection.getSelectedRows(); 

     //put your secondary call for your second grid here ex: 
     var config = { 
      params : {param : currentRow[0].prop} 
     } 

     $scope.get("/your/URL", config) 
       .then (function (data) { //success callback }) 
       .then (function (data, status...etc) { //error callback}) 
       .finally(function(data,...etc) {//reset your grid}) 
    }); 
}; 

Laissez-moi savoir si cela résout votre problème.

http://ui-grid.info/docs/#/tutorial