Zmiana widoczności kolumn kątowych ui-grid

Question

Chcę pokazać/ukryć kolumny po renderowaniu siatki. Zanim przeniosłem się do nowej sieci ui-grid zadzwoniłem do toggleVisible(), ale teraz to nie działa. Próbowałem zmienić widoczność kolumna def (lub innego mienia) jak poniżej

columnDefs[9].visible = false; 

Kiedy ustawić widoczność na definicji kolumny (przed render) to działa, ale po oddziałach i nie można go zmienić.

Answer 1

Właśnie rozpoczął pracę z angular-ui-grid, więc może to nie być najlepsze rozwiązanie.

Spróbuj tym API obiektu uiGrid a następnie wywołanie metody refersh na grid obiektu

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

Answer 2

stare pytanie, ale to działa na mnie w 3.0.0-rc.20. Zgaduję, że columnDefs musi być w zasięgu.

$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

Jeśli ktoś szukał rozwiązania, które nie wymagało utworzenia 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; 
     } 

    } 

Wystarczy zastąpić pole column.field === '_ id' swoim własnym stanem. Nie zapomnij również zwrócić kolumn lub nie otrzymasz żadnych kolumn.

Answer 4

Odpowiedź z user3310980 był korzystny, gdy widziałem go, ale jest bardzo mało dokumentacji na registerColumnsProcessor metody. Znalazłem odwołanie do jego komentarza na temat używania go bez definicji kolumn, więc chciałem wyjaśnić, że z pewnością można użyć tej metody z defektami kolumn. Zapewnia to pewną interesującą elastyczność.

W tym przykładzie są cztery kolumny, które zamieniają się z czterema innymi kolumnami określonymi za pomocą przełącznika. $ctrl.showDetails to true, gdy kolumny sprzedaży powinny się wyświetlać, a false, gdy powinny być wyświetlane elementy płatności.

W definicjach kolumnowych, właściwość onRefresh jest zdefiniowana jako metoda zadzwonić na kolumnie siatki odświeżyć i metody setVisibleColumns jest dostarczany do registerColumnsProcessor(). Gdy siatka jest odświeżony, dla każdej kolumny, to sprawdź definicję kolumny w nieruchomości colDef i wywołać metodę onRefresh dla każdej kolumny, która określa to, ze this zestaw do obiektu kolumny.

/*--------------------------------------------*/ 
/* 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 
    }; 

Kiedy $ctrl.showDetails zostanie zmieniona, to prosta odświeżania będzie zamienić kolumny.

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

Mam nadzieję, że komuś to pomoże.