如何根据其值隐藏 ui-grid 中的某些行？

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

一种方法是调整 row-repeater-template 以检查某些特定于行的值并使行 show/hide 如此。我创建了 a Plunkr 来展示可能的解决方案。

首先您需要创建行值检查函数：

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

然后您通过将检查添加到他们的行中继器来调整他们的模板

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

Answer 2

您可以通过创建单元格模板来隐藏它，并根据每个字段的行值隐藏它：

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

我做了一个 Plunk 来演示解决这个问题的可行技术：https://plnkr.co/edit/XQRC45vaiZCySZYkEGrz?p=preview

Answer 3

我知道你特别说过 "without actually changing the data"，但是将过滤后的数据集分配给网格不会更改数据集，只会更改网格的数据。对于像这样的其他情况，它也可能是相关且有效的解决方案。

我分叉了CMR's Plunk to demonstrate this: http://plnkr.co/edit/NntwWb?p=preview

关键部分只是在分配数据集时添加一个filter：

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

如何根据其值隐藏 ui-grid 中的某些行？

How do I hide certain rows in a ui-grid based on its values?

html

javascript

angularjs

angularjs-filter

angular-ui-grid