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

我有这些选项的简单UI格：如何根据其值来隐藏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" } 
];

没有实际改变数据，它是否可以从行中过滤出来？

来源

2016-03-03 ua_boaz

一种方法是调整行转发器模板以检查某个特定行的值并使该行以这种方式显示/隐藏。我创建了a Plunkr，展示了一种可能的解决方案。

首先，你需要创建行值检查器功能：通过增加检查其行中继

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

然后你调整自己的模板

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

来源

2016-03-04 12:55:56 CMR

所以它发生，我也有一个celltemplate我在哪里使用appscope，所以在添加您建议的代码后，此方法EditTransaction（）不被称为\t \t \t \t“cellTemplate”：“

” –

嘿，我添加了ng-click在这个plunkr http://plnkr.co/edit/AeuT6GqvuoXDDjFpYnWq?p=preview，它的工作原理。你能提供更多的信息或创建一个不工作的PLUNK？ – CMR

你可以将其隐藏通过创建单元格模板并基于每个字段的行值隐藏它：

$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

来源

2017-11-24 11:01:42 user1909711

尽管此链接可能回答此问题，但最好在此处包含答案的重要部分，并提供供参考的链接。如果链接页面更改，则仅链接答案可能会失效。 - [来自评论]（/ review/low-quality-posts/18051278） – Korcholis

我知道你具体说“没有实际改变数据”，但分配一个过滤的数据集到网格不会改变数据集，只是网格的数据。它也可能是这样的其他案例的相关和有效的解决方案。

我分叉CMR的普拉克证明这一点：http://plnkr.co/edit/NntwWb?p=preview

的关键部分是刚刚加入filter分配数据集时：

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

来源

2017-11-24 12:29:43 Flygenring

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

回答

相关问题