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>

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

客户端过滤：

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

然后，您需要向控制器添加一些吸气剂，以检查是否存在可见行，例如：

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。

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

我带了他们那里的那个小矮人，并对其进行了编辑以展示我的解决方案建议。 http://next.plnkr.co/edit/Afzv98kxxyMObK9r

检查viewimage.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { CustomAdapter customadapter = new CustomAdapter(); images_listview.setAdapter(customadapter); } });函数，注意在过滤时我用filterChanged字段保存了全部数据。

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

2 个答案: