web-dev-qa-db-fra.com

Changer la visibilité angulaire de la colonne ui-grid

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.

angular-ui-grid
15
UshaP

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();
};
15
mmamane

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();
11
Igor Malyk

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.

8
user3310980

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.showDetailsest 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éonRefreshest définie en tant que méthode permettant d'appeler la colonne lors de l'actualisation de la grille et la méthodesetVisibleColumnsest fournie àregisterColumnsProcessor(). Lorsque la grille est actualisée, pour chaque colonne, il vérifie la définition de colonne dans la propriétécolDefet appelle la méthodeonRefreshpour chaque colonne qui la définit, avecthisdé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.showDetailsest 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. 

0
sthames42