如何根据其值隐藏ui网格中的某些行？

Question

我有一个简单的UI网格,包含以下选项:

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

我想隐藏具有特定值的行deleted: "y".

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

如果没有实际更改数据,是否可以从行中过滤掉？

Answer 1

一种方法是调整行中继器模板以检查某些特定于行的值,并使行显示/隐藏.我创建了一个展示可能解决方案的Plunkr.

首先,您需要创建行值检查器功能:

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

然后通过将该检查添加到其行中继器来调整其模板

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