Modifica della visibilità delle colonne della griglia utente angolare

Question

Desidero mostrare/nascondere le colonne dopo il rendering della griglia. Prima di passare alla nuova griglia ui ho chiamato a toggleVisible() ma ora non sembra funzionare. Ho provato a cambiare la visibilità della colonna DEF (o qualsiasi altra proprietà) come muggito

columnDefs[9].visible = false; 

Quando ho creato la visibilità sulla definizione della colonna (prima di rendering) funziona, ma dopo reparti non posso cambiarlo.

Answer 1

Ho appena iniziato a lavorare con angular-ui-grid, quindi questa potrebbe non essere la soluzione migliore.

Prova incluso l'oggetto api uiGrid e poi richiamare il metodo refersh su un oggetto grid

... 
$scope.gridOptions.onRegisterApi = function(gridApi){ 
    $scope.gridApi = gridApi; 
}; 
.... 
columnDefs[9].visible = false; 
$scope.gridApi.grid.refresh(); 

Answer 2

vecchia questione, ma questo funziona per me in 3.0.0-rc.20. Sto indovinando che columnDefs deve essere nel campo di applicazione.

$scope.columnDefs = [ 
    { name: 'one' }, 
    { name: 'two', visible: false } 
]; 

$scope.grid = { 
    data: 'data', 
    columnDefs: $scope.columnDefs 
}; 

$scope.grid.onRegisterApi = function(gridApi){ 
    $scope.gridApi = gridApi; 
};  

$scope.showColumnTwo = function() { 
    $scope.columnDefs[1].visible = true; 
    $scope.gridApi.grid.refresh(); 
}; 

Answer 3

Nel caso in cui qualcuno fosse alla ricerca di una soluzione che non richiedesse la creazione di un columndDef.

Basta sostituire il column.field === '_ id' parte con le proprie condizioni. Inoltre, non dimenticare di restituire le colonne o non otterrai nessuna colonna.

Answer 4

La risposta da user3310980 è stato preferito quando l'ho visto, ma c'è molto poco documentazione sul metodo diregisterColumnsProcessor. Ho trovato riferimento al suo commento sull'utilizzo senza definizioni di colonne, quindi volevo chiarire che si può certamente usare questo metodo con le colonne. Ciò fornisce una certa flessibilità interessante.

In questo esempio, ci sono quattro colonne che si scambiano con altre quattro colonne determinate da un pulsante di attivazione/disattivazione. $ctrl.showDetails è true quando le colonne di vendita devono essere visualizzate e false quando devono essere visualizzati gli articoli di pagamento.

Nelle definizioni di colonna, la proprietà onRefresh è definito come un metodo da chiamare per la colonna di aggiornamento della griglia e il metodo setVisibleColumns viene alimentata al registerColumnsProcessor(). Quando la griglia viene aggiornata, per ogni colonna, si verificherà la definizione di colonna nella proprietà colDef e chiamare il metodo onRefresh per ogni colonna che definisce, con this insieme all'oggetto colonna.

/*--------------------------------------------*/ 
/* showPayments - Make payment items visible. */ 
/* showDetails - Make sales items visible. */ 
/*--------------------------------------------*/ 
var showPayments = function() { this.visible = !$ctrl.showDetails; }; 
var showDetails = function() { this.visible = $ctrl.showDetails; }; 

var columnDefs = 
    [ 
    { field: 'receiptDate', displayName: 'Date',  width: 120, type: 'date', cellFilter: "date:'MM/dd/yyyy'", filterCellFiltered: true }, 
    { field: 'receiptNumber', displayName: 'Rcpt No', width: 60, type: 'number' }, 
    { field: 'receiptFrom', displayName: 'From',  width: 185, type: 'string' }, 
    { field: 'paymentMethod', displayName: 'Method', width: 60, type: 'string', onRefresh: showPayments }, 
    { field: 'checkNumber', displayName: 'No',  width: 60, type: 'string', onRefresh: showPayments }, 
    { field: 'checkName',  displayName: 'Name',  width: 185, type: 'string', onRefresh: showPayments }, 
    { field: 'paymentAmount', displayName: 'Amount', width: 70, type: 'string', onRefresh: showPayments }, 
    { field: 'description', displayName: 'Desc',  width: 100, type: 'string', onRefresh: showDetails }, 
    { field: 'accountNumber', displayName: 'Acct No', width: 80, type: 'string', onRefresh: showDetails }, 
    { field: 'accountName', displayName: 'Acct Name', width: 160, type: 'string', onRefresh: showDetails }, 
    { field: 'salesTotal',  displayName: 'Amount', width: 70, type: 'string', onRefresh: showDetails } 
    ]; 

/*----------------------------------------------------*/ 
/* Columns processor method called on grid refresh to */ 
/* call onRefresh' method for each column if defined. */ 
/*----------------------------------------------------*/ 
var setVisibleColumns = function(cols) 
    { 
    for (var i=0; i < cols.length; i++) 
    if (cols[i].colDef.onRefresh) 
     cols[i].colDef.onRefresh.call(cols[i]); 
    return cols; 
    }; 

/*----------------------------------*/ 
/* Callback to set grid API in  */ 
/* scope and add columns processor. */ 
/*----------------------------------*/ 
var onRegisterApi = function(api) 
    { 
    $ctrl.itemList.api = api; 
    api.core.registerColumnsProcessor(setVisibleColumns); 
    }; 

/*------------------------------*/ 
/* Configure receipt item grid. */ 
/*------------------------------*/ 
$ctrl.showDetails = false; 
$ctrl.itemList = 
    { 
    columnDefs:    columnDefs, 
    enableCellEdit:   false, 
    enableColumnMenus:   false, 
    enableFiltering:   false, 
    enableHorizontalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED, 
    enableVerticalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED, 
    data:      [], 
    onRegisterApi:    onRegisterApi 
    }; 

Quando $ctrl.showDetails è cambiato, un semplice aggiornamento sarà scambiare le colonne.

$ctrl.showDetails = !$ctrl.showDetails; 
$ctrl.itemList.api.grid.refresh(); 

Spero che questo sia utile a qualcuno.