2014-10-03 11 views
12

Non riesco a ottenere alcun ridimensionamento di paging o di colonna funzionante nel nuovo ngGrid (ui-Grid) rc build v3.0.0- rc.11. Dovrebbe essere molto semplice in base a questo esempio: http://ui-grid.info/docs/#/tutorial/401_AllFeaturesIs paging e columnResizing non funzionano in ui-grid v3.0.0-rc.11

Per il mio div principale, se faccio questo:

<div ui-grid="productGridOptions" ui-grid-resize-columns class="uiGridProducts"> 

e nel mio controller fare questo:

$scope.productGridOptions={};  


     $scope.productGridOptions.enableColumnResizing = true; 
     $scope.productGridOptions.enableFiltering = false; 
     $scope.productGridOptions.enablePaging = true; 

     $scope.productGridOptions.pagingOptions = { 
        pageSizes: [250, 500, 1000], 
        pageSize: 250, 
        currentPage: 1 
     }; 


     $scope.productGridOptions.rowIdentity = function(row) { 
      return row.id; 
      }; 

     $scope.productGridOptions.getRowIdentity = function(row) { 
      return row.id; 
     }; 

     $scope.productGridOptions.data = 'products'; 

     //The options for the data table  
     $scope.productGridOptions.columnDefs = [ 
        { name:'ID', field: 'id' }, 
        { name:'Product', field: 'productName' }, 
        { name:'Active Ing.', field: 'activeIngredients'}, 
        { name:'Comments', field: 'comments' } 
       ]; 

     prProductService.getProducts().then(function(products) { 
      $scope.products = products; 



     }); 

Né cercapersone o lavoro di ridimensionamento delle colonne. Non ci sono esempi di paging sul tutorial della griglia, quindi supponiamo che sia simile a ngGrid, ma che ridimensiona la colonna di cui ho veramente bisogno al momento.

saluti

i

risposta

17

Bene per ridimensionamento delle colonne, grazie a questo link

http://technpol.wordpress.com/2014/08/23/upgrading-to-ng-grid-3-0-ui-grid/

a quanto pare è necessario aggiungere 'ui.grid.resizeColumns' come una dipendenza nella vostra applicazione modulo, e basta usare il tag ui-grid-ridimensiona-colonne nel div (come sto facendo) ...

Ho rimosso il codice

$scope.productGridOptions.enableColumnResizing = true; 

E la colonna ridimensionamento sta lavorando ora ....

Ora al paging.

saluti

i

+0

Questo ha risolto il mio problema, grazie. Stavo guardando http://ui-grid.info/docs/#/api/ui.grid.resizeColumns.directive:uiGridColumnResizer che suggerisce di usare l'attributo 'ui-grid-column-resizer', ma il tuo suggerimento di' ui- l'attributo grid-resize-columns' ha funzionato per me. – Kon

15

ridimensionamento Colonna sta lavorando bene per me. Ho dovuto aggiungere per aggiungere 'ui.grid.resizeColumns' come dipendenza:

angular.module('app', ['ngRoute', 'ngResource', 'ui.bootstrap', 'ui.grid', 'ui.grid.resizeColumns']) 

Poi nel tuo html si aggiunge la classe ui-grid-ridimensionare-colonne:

<div class="grid" ui-grid="gridOptions" ui-grid-resize-columns></div> 

E infine nel controller di impostare enableColumnResizing a veri in gridOptions:

$scope.gridOptions = { 
    data: 'data.data', 
    enableSorting: true, 
    enableColumnResizing: true 
} 

Spero che funzioni finalmente per te.

informazioni extra a: angular-ui-grid column resizing

+1

Questo è simile alla mia risposta. Lo apprezzo. – smackenzie

2

Non posso parlare per le versioni precedenti , ma in ui-grid versione 3.1.1 è sufficiente aggiungere la dipendenza ui.grid.resizeColumns al modulo e impostare enableColumnResizing = true in gridOptions. Non è necessario aggiungere l'attributo ui-grid-ridimensiona-colonne al tag div.