Je veux afficher/masquer les colonnes après le rendu de la grille. Avant de passer à la nouvelle grille ui J'ai appelé à toggleVisible()
mais maintenant, cela ne semble pas fonctionner… .. J'ai essayé de modifier la visibilité de la colonne par défaut (ou toute autre propriété) comme ci-dessous
columnDefs[9].visible = false;
Lorsque je règle la visibilité sur la définition de la colonne (avant le rendu), cela fonctionne, mais après, je ne peux pas le changer.
Vieille question, mais cela fonctionne pour moi dans 3.0.0-rc.20. Je suppose que columnDefs doit être dans la portée.
$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();
};
Je viens juste de commencer à travailler avec angular-ui-grid
et ce n'est peut-être pas la meilleure solution.
Essayez d'inclure l'objet api uiGrid puis d'appeler la méthode refersh
sur un objet grid
...
$scope.gridOptions.onRegisterApi = function(gridApi){
$scope.gridApi = gridApi;
};
....
columnDefs[9].visible = false;
$scope.gridApi.grid.refresh();
Si quelqu'un cherchait une solution qui ne nécessite pas la création d'un fichier columndDef.
s.gridOptions = {
data: 'myData',
onRegisterApi: function(gridApi) {
gridApi.core.registerColumnsProcessor(hideIdColumn);
s.gridApi = gridApi;
function hideIdColumn(columns){
columns.forEach(function(column){
if(column.field==='_id'){
column.visible=false;
}
});
return columns;
}
}
Il suffit de remplacer la partie column.field === '_ id' par votre propre condition . N'oubliez pas de renvoyer les colonnes sinon vous n'obtiendrez aucune colonne.
La réponse de user3310980 était préférable lorsque je l'ai vue, mais il existe très peu de documentation sur la méthode registerColumnsProcessor . J'ai trouvé une référence à son commentaire sur son utilisation sans définition de colonne, je voulais donc préciser que vous pouvez certainement utiliser cette méthode avec column defs. Cela offre une flexibilité intéressante.
Dans cet exemple, quatre colonnes sont permutables avec quatre autres colonnes déterminées par un bouton à bascule.$ctrl.showDetails
est true
lorsque les colonnes de vente doivent s'afficher et false
lorsque les postes de paiement doivent s'afficher.
Dans les définitions de colonne, la propriétéonRefresh
est définie en tant que méthode permettant d'appeler la colonne lors de l'actualisation de la grille et la méthodesetVisibleColumns
est fournie àregisterColumnsProcessor()
. Lorsque la grille est actualisée, pour chaque colonne, il vérifie la définition de colonne dans la propriétécolDef
et appelle la méthodeonRefresh
pour chaque colonne qui la définit, avecthis
défini sur la colonne objet.
/*--------------------------------------------*/
/* 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
};
Lorsque$ctrl.showDetails
est modifié, une simple actualisation intervertira les colonnes.
$ctrl.showDetails = !$ctrl.showDetails;
$ctrl.itemList.api.grid.refresh();
J'espère que cela est utile à quelqu'un.