Wie verstecke ich bestimmte Zeilen in einem UI-Grid basierend auf seinen Werten?

Question

Ich habe ein einfaches UI-Raster mit diesen Optionen:

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

Ich mag Zeilen verstecken, die einen bestimmten Wert haben, deleted: "y".

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

Ohne tatsächlich die Daten zu ändern, kann es aus Zeilen herausgefiltert werden?

Answer 1

Eine Möglichkeit besteht darin, die Zeilenrepeater-Vorlage so anzupassen, dass sie nach einem zeilenspezifischen Wert sucht und die Zeile so ein-/ausblenden lässt. Ich erstellte a Plunkr präsentiert eine mögliche Lösung.

Zuerst müssen Sie Ihre Zeilenwert-Checker-Funktion erstellen:

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

Dann stellen Sie ihre Vorlage durch, dass der Check ihrer Zeilen Repeater Hinzufügen

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

Answer 2

Sie es verstecken durch Zellvorlagen erstellen und verstecken es für jedes Feld auf Zeilenwert basiert:

$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>' 
     } 
    ] 
}; 

ich Plunk gemacht demonstrieren Sie eine praktikable Technik, um dies zu lösen: https://plnkr.co/edit/XQRC45vaiZCySZYkEGrz?p=preview

Answer 3

Ich weiß, dass Sie speziell gesagt, "ohne tatsächlich die Daten zu ändern", aber ein gefiltertes Dataset dem Raster zuweisen würde nicht das Dataset ändern, nur die Daten für das Raster. Es könnte auch eine relevante und gültige Lösung für andere Fälle sein.

ich gegabelt CMR ‚s Plunk dies zu demonstrieren: http://plnkr.co/edit/NntwWb?p=preview

Der wichtigste Teil nur ein filter hinzuzufügen, wenn die Datenmenge zuweisen:

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