Angulaire de l'INTERFACE utilisateur de la Grille - Cliquez sur l'événement sur la ligne sélectionnée

Cible

J'ai une INTERFACE utilisateur de la Grille. Quand je clique sur une ligne, elle doit être sélectionné, et d'une fonction avec la ligne comme un paramètre doit être appelé.

Approche Actuelle

- Je utiliser la configuration suivante de code pour générer la Grille:

$scope.gridOptions = {
        enableFiltering: true,
        enableRowHeaderSelection: false,
        enableRowSelection: true,
        multiSelect: false,
        noUnselect: true,
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
            $scope.gridApi.selection.on.rowSelectionChanged($scope, function (row) {
                var name = row.entity.name;
                $scope.addToQueue(name);
            });
        }
    };

Problème

Le code ci-dessus fonctionne bien quand je l'ai fait modifier la sélection (comme le nom de la fonction en proposer). Mais il devrait être possible d'ajouter une ligne à plusieurs reprises à la file d'attente. Donc, je tiens à appeler $scope.addToQueue(name) même lorsque la ligne est déjà sélectionné.

OriginalL'auteur GuyWithCookies | 2016-11-25

  1. 3

    Pour la ligne à être sélectionné, lorsqu'il est cliqué, j'utilise suivantes:

    Utilisation selectionCellTemplate pour toutes les colonnes:

     var selectionCellTemplate = '<div class="ngCellText ui-grid-cell-contents">' +
               ' <div ng-click="grid.appScope.rowClick(row)">{{COL_FIELD}}</div>' +
               '</div>';

 $scope.gridOptions.columnDefs = [        
    { name: 'name', displayName: 'Name', width: '15%', cellTemplate: selectionCellTemplate },       
   ];

    Puis définir rowClick() méthode:

     $scope.rowClick = function (row) {       
    var index = row.grid.renderContainers.body.visibleRowCache.indexOf(row);
    $scope.gridApi.selection.selectRow($scope.gridOptions.data[index]);
};

    J'ai également défini multiselect pour être vrai

    $scope.gridOptions.multiSelect = true;

    Sorte de ligne clic permet de sélectionner la ligne et ajouter les lignes sélectionnées. vous pouvez accéder à ces lignes sélectionnées comme (Il est déclenché pour chaque ligne sélectionner/désélectionner) :

    $scope.gridOptions.onRegisterApi = function (gridApi) {
    //set gridApi on scope
    $scope.gridApi = gridApi;        
    gridApi.selection.on.rowSelectionChanged($scope, doSelection);
};

function doSelection(row) {      
    _.each($scope.gridApi.selection.getSelectedRows(), function (row) {
        //Do something //It is triggered for each row select/unselect         
    });
}

    Ou les lignes sélectionnées peuvent être consultées en tout temps:

      $scope.gridApi.selection.getSelectedRows()

    OriginalL'auteur Bhavjot

  2. 1

    déplacer l'appel à addToQueue fonction de gridApi.grid.element.on('click'...) fonction, et de stocker ligne dans gridApi.selection.on.rowSelectionChanged fonction:

    $scope.gridOptions.onRegisterApi = function (gridApi) {
  //set gridApi on scope
  $scope.gridApi = gridApi;
  gridApi.selection.on.rowSelectionChanged($scope, function (row) {
    $scope.gridApi.grid.appScope.lastSelectedRow = row;
  });

  gridApi.grid.element.on('click', function (ev) {
    if ($scope.gridApi.grid.appScope.lastSelectedRow) {
      //affect only rows (not footer or header)
      if (ev.target.className.includes('ui-grid-cell-contents')) {
        var name = $scope.gridApi.grid.appScope.lastSelectedRow.entity.name;
        $scope.addToQueue(name);
      }
    }
  });
};

$scope.addToQueue = function addToQueue (name) {
  console.log('addToQueue fired, name = ' + name);
};

    plunker: http://plnkr.co/edit/qtXJ7MUy35QRjYXkEXuG?p=preview

    OriginalL'auteur Andriy

  3. 1

    Approuvé réponse effectuées pour moi, mais pour un petit bug ici...

    var selectionCellTemplate = '<div class="ngCellText ui-grid-cell-contents">' +
           ' <div ng-click="grid.appScope.rowClick(row)">{{COL_FIELD}}</div>' +
           '</div>';

    J'avais besoin de le changer...

    var selectionCellTemplate = '<div class="ngCellText ui-grid-cell-contents"
           ng-click="grid.appScope.rowClick(row)">' +
           '<div>{{COL_FIELD}}</div>' +
           '</div>';

    Vous remarquerez que j'ai déplacé la ng-cliquez sur le div parent.
    Cela n'est nécessaire que si une cellule est vide, le ng-cliquez sur l'événement ne serait pas le feu.

    OriginalL'auteur James Gardiner