当我们在 angularjs ui 网格中使用默认过滤器时如何显示未找到匹配的记录

Question

当我们在 angularjs ui 网格中使用默认过滤器时，如何显示未找到匹配的记录；当前，当我们使用过滤器且数据不包含该值时，出现空白屏幕

Answer 1

这取决于您使用的过滤条件。

服务器端过滤：

只需检查行长度：

  <div ui-grid="gridOptions">
    <div ng-if="grid.rows.length === 0" style="position: absolute; top: 50%; left: 0; right: 0; text-align: center;">No data.</div>
  </div>

如果初始数据为空或过滤器将其过滤掉，这也适用。

客户端过滤：

行始终存在，只是它们的可见性很重要，因为它们会被过滤掉。

然后你需要添加一些getter到控制器来检查是否有可见的行，像这样：

vm.hasVisibleRows = function() {
  return vm.gridApi.grid.rows.filter(function(e) { return e.visible; }).length > 0;
}

并在视图中使用这个：

<div id="grid1" ui-grid="$ctrl.gridOptions" class="grid">
  <div ng-if="!$ctrl.hasVisibleRows()" style="position: absolute; top: 50%; left: 0; right: 0; text-align: center;">No data.</div>
</div>

您可以随心所欲地设置消息外观的样式。

Answer 2

我认为要走的路是使用外部过滤并使用过滤功能来检测过滤后何时没有数据。您可以使用它来更改 $scope 上的标志，并使用该标志来打开或关闭带有消息的 div 例如。

这是外部过滤的 link - http://ui-grid.info/docs/#!/tutorial/Tutorial:%20308%20External%20Filtering

我拿走了他们那里的 plunker 并对其进行了编辑以展示我的解决方案建议。 http://next.plnkr.co/edit/Afzv98kxxyMObK9r

检查 filterChanged 函数并注意我对 allData 字段所做的操作以在过滤时保存完整数据。

当我们在 angularjs ui 网格中使用默认过滤器时如何显示未找到匹配的记录

How to show no matched record found match when we use default filter in angularjs ui grid

angularjs

angular-ui-grid