2014-11-14 8 views
24

Con l'ultima versione di ui-grid (v3.0.0-rc.16) è possibile disattivare separatamente la barra di scorrimento orizzontale e verticale. Ho ottenuto questo funzionamento scambiandoUtilizzo delle costanti della griglia utente per disabilitare le barre di scorrimento

$scope.gridOptions.enableScrollbars = false; 

con

$scope.gridOptions.enableHorizontalScrollbar = 0; 
$scope.gridOptions.enableVerticalScrollbar = 0; 

Nelle fonti di ui-grid ci sono tre costanti definite per le barre di scorrimento:

scrollbars: { 
    NEVER: 0, 
    ALWAYS: 1, 
    WHEN_NEEDED: 2 
} 

Fronte al fatto che ui -grid è ancora instabile e cambia molto spesso, mi sentirei più a mio agio nell'utilizzare queste costanti anziché i valori specifici. Ma come posso accedervi?

Plunker: http://plnkr.co/edit/h0ewAZK616rKCH3T62te

risposta

47

Got la mia risposta su github:

Tutto quello che dovevo fare era di passare uiGridConstants al mio controller in questo modo:

angular.module('myApp').controller('myCtrl',function($scope,uiGridConstants) { 
    ... 

    $scope.gridOptions.enableHorizontalScrollbar = uiGridConstants.scrollbars.NEVER; 

    ... 
}) 
+1

Dove trovi tutte le opzioni disponibili per 'uiGridConstants'? –

+0

I console.log'd it: è solo avg, count, max, min e sum? Mi sento come se stddev fosse lì dentro –

+1

Il modo più affidabile per ottenere le informazioni necessarie riguardo alla rete ui è leggere il codice sorgente e chiedere agli sviluppatori su git hub. :) – nabinca

14

Con John stile Papa:

ExampleController.$inject = ['$scope', 'uiGridConstants']; 
function ExampleController($scope, uiGridConstants) { 
    var vm = this; 

    vm.gridOptions = { 
     enableHorizontalScrollbar : uiGridConstants.scrollbars.NEVER, 
     enableVerticalScrollbar : uiGridConstants.scrollbars.NEVER 
    }; 
} 
9

Una soluzione per questo (poiché WHEN_NEEDED è currentl y disabilitato) è quello di impostare enableHorizontalScrollbar: 0 sui vostri gridOptions e poi nel foglio di stile sono le seguenti:

.ui-grid .ui-grid-render-container-body .ui-grid-viewport { 
    overflow-x: auto !important; 
} 

Ora la barra di scorrimento orizzontale viene visualizzato solo quando necessario.