Come nascondere determinate righe in una griglia utente in base ai relativi valori?

Question

Ho una semplice griglia UI con queste opzioni:

$scope.transactionGrid = { 
    enableSorting : true, 
    enableColumnResize : true, 
    enableScrollbars : true, 
    enablePaginationControls : false, 
    minRowsToShow : 6, 
    onRegisterApi : function(gridApi) { 
     $scope.gridEventsApi = gridApi; 
    } 
}; 

voglio nascondere le righe che hanno un valore specifico, deleted: "y".

$scope.transactionGrid.data = [ 
    { Name: "First", deleted: "y" }, 
    { Name: "Second", deleted: "y" }, 
    { Name: "Third", deleted: "n" }, 
    { Name: "Fourth", deleted: "n" } 
]; 

Senza effettivamente modificare i dati, può essere filtrato dalle righe?

Answer 1

Un modo è quello di regolare il modello di ripetitore di riga per verificare la presenza di un valore specifico per riga e visualizzare/nascondere la riga in questo modo. Ho creato a Plunkr mostrando una possibile soluzione.

In primo luogo è necessario creare la riga-valore-checker-funzione:

appScopeProvider: { 
    showRow: function(row) { 
    return row.deleted !== 'y'; 
    } 
}, 

Poi regolare il loro modello aggiungendo che il check della fila in-ripetitore

$templateCache.put('ui-grid/uiGridViewport', 
    ... 
    ng-if=\"grid.appScope.showRow(row.entity)\" 
    ... 
} 

Answer 2

È possibile nasconderlo creando modelli di celle e nascondendole in base al valore di riga per ogni campo:

$scope.transactionGrid = { 
    enableSorting : true, 
    enableColumnResize : true, 
    enableScrollbars : true, 
    enablePaginationControls : false, 
    minRowsToShow : 6, 
    onRegisterApi : function(gridApi) { 
     $scope.gridEventsApi = gridApi; 
    } 

    // Column template definitions: 
    columnDefs: [ 
     { 
      name: 'Name', 
      displayName: 'Name', 
      cellTemplate : '<div ng-if="row.entity.deleted">{{row.entity.Name}}</div>' 
     } 
    ] 
}; 

Ho fatto un Plunk a dimostrare una valida tecnica per risolvere questo: https://plnkr.co/edit/XQRC45vaiZCySZYkEGrz?p=preview

Answer 3

So che hai detto esplicitamente "senza effettivamente modificare i dati", ma assegnare un set di dati filtrato alla griglia non cambierebbe il set di dati, solo i dati per la griglia. Potrebbe anche essere una soluzione valida e valida per altri casi come questo.

ho biforcuta CMR s' Plunk per dimostrare questo: http://plnkr.co/edit/NntwWb?p=preview

La parte fondamentale è solo l'aggiunta di un filter quando si assegna il set di dati:

$scope.gridOptions = { 
    data: $scope.myData.filter(function(row) { 
     return row.deleted !== "y"; 
    }) 
};