2013-10-16 1 views
6

desidero configurare ng-grid avere la seguente comportamento selezione di più:ngGrid multiselect annullando selezione corrente

  1. Selezione di una singola riga si annulla la selezione precedente

  2. Selezionando con Ctrl o Spostamento aggiunge alla selezione corrente (ad esempio selezionando i file in Windows Explorer, ad esempio)

Particolari:

  • se seleziono una riga, l'intera riga è selezionata (enableRowSelection)
  • se seleziono una riga che tiene Ctrl la nuova riga è selezionata in aggiunta al momento selezionata righe
  • se seleziono tengono spostamento gamma viene selezionato
  • se seleziono una riga senza premere alcun tasto desidero riga da selezionare e l'altra s non selezionati

ng-grid opere come previsto, tranne per l'ultimo passaggio (deselezionando la altre righe quando si fa clic di fila)

+0

in base a tutte le demo sulla loro pagina (http://angular-ui.github.io/ng-grid/) facendo clic su una riga selezionata la deseleziona. Stai vedendo errori javascript nella console perché dovrebbe funzionare – Ronnie

+0

@Ronnie grazie per il tuo commento: selezionando di nuovo una riga lo deseleziona davvero, ma quello di cui ho bisogno è che facendo clic su una riga che non è selezionata deseleziona tutti gli altri (e seleziona quello cliccato) – mabi

+1

Quindi, si desidera attivare $ scope.gridOptions {multiSelect: false} su $ scope.gridOptions {multiSelect: true} quando si usa Ctrl + clic? Sembra la stessa domanda della precedente domanda SO: http://stackoverflow.com/questions/19090613 dove @Dar ha risolto una soluzione sporca per questo. (usando solo le sue parole :) – AardVark71

risposta

1

È possibile aggiungere questo al controllore della griglia:

$scope.multiSelect = false; 
// control/shift/meta keydown enables multiselect 
$('.your-grid').keydown(function (e) { 
    if ((e.keyCode === 16 || e.keyCode === 17 || e.metaKey || e.keyCode === 224 || e.keyCode === 91 || e.keyCode === 93) && !$scope.multiSelect) { 
     $scope.multiSelect = true; 
    } 
}); 
// keyup disables it 
$('.your-grid').keyup(function (e) { 
    if (e.keyCode === 16 || e.keyCode === 17 || e.metaKey || e.keyCode === 224 || e.keyCode === 91 || e.keyCode === 93) { 
     $scope.multiSelect = false; 
    } 
}); 

$scope.gridOptions.beforeSelectionChange = function() { 
    // if the shift/ctrl/meta keys aren't pressed, then each selection 
    // will clear all the previous ones 
    if (!$scope.multiSelect) { 
     for (var i = 0; i < $scope.gridOptions.data.length; ++i) { 
      $scope.gridOptions.selectRow(i, false); 
     } 
    } 
    return true; 
}; 

Dove la visualizzazione sarebbe simile a:

<div class="your-grid" ng-grid="gridOptions"> 

Il motivo per tutti i diversi valori di keyCode è che Mac Il codice chiave del tasto di comando dipende dal browser. Puoi usare e.metaKey, ma questo non funziona per tutto (Mac Chrome non credo). Per sicurezza, è possibile controllare tutti i valori KeyCode descritti nel post SO: How does one capture a Mac's command key via JavaScript?

Questa soluzione è ispirata a: AngularJS Change multiple row selection ng-grid attribute on key down e un altro post SO che non riesco a trovare al momento.