在撰写本文时,还没有关于如何构造“filterText”字符串的总结。在研究了 ng-grid.js 代码并进行了一些猜测之后,我发现“filterText”比当前文档建议的更强大和更具表现力。
示例设置
要设置答案,首先考虑一个具有以下定义的网格,位于某个控制器中:
$scope.pricing_data = data['records'];
$scope.gridOptions = {
data: 'pricing_data',
columnDefs: [
{ field: 'ticker', displayName: 'Ticker' },
{ field: 'date', displayName: 'Date' },
{ field: 'close', displayName: 'Close' },
{ field: 'volume', displayName: 'Volume' }
],
filterOptions: {filterText: '', useExternalFilter: false},
showFilter: true
};
data['records'] 处的对象可以是后端发送的某个 json 对象。示例表可能如下所示:
就目前而言,filterText 是空白的,因此会显示所有记录。
网格右上角的向下胡萝卜是可见的,因为 showFilter 为 true。单击向下的胡萝卜会显示一个绑定到变量“filterText”的输入。对于本次讨论,我将使用此下拉列表显示一些结果,但通常您可以在控制器代码中直接分配给 filterText。下拉列表如下所示:
搜索网格中的所有字段
默认情况下,filterText 对网格中的每个单元格执行一个正则表达式。键入字符“a”会选择在该记录的任何条目(或列)中具有字符“a”的所有记录。键入“ab”选择在该记录的任何条目中具有字符序列“ab”的所有记录。根据您的要求,此行为可能非常合适。但是,对于大型数据集,由于数据的性质(例如选择价格代码)以及搜索整个网格的高成本,通常希望过滤列而不是整个网格。
按列搜索
为了只在一列上搜索字符串或正则表达式,filterText 语法为:
filterText = '<displayName>:<literal>'
例如,
这里的 displayName 'Date'(不要使用字段值,您必须使用 displayName)后跟一个冒号 ':',然后是一个部分字符串。结果是只选择了三个记录,即与 10 月 30 日相关联的记录。
让我们扩大搜索范围。要搜索 Oct 30th 或 Oct 31st,语法为
filterText = '<displayName>:<literal 1>|<literal 2>|...'
管道'|'分隔每个字符串部分。您可以将任意数量链接在一起。多日期过滤器可能如下所示:
显然,选择本质上是OR。然而,我的例子并不好,因为代码和日期有不相交的字符。因此,您可以相信我只搜索 Date 列,也可以设置您自己的示例。 (或者,更好的是,阅读 ng-grid 中的 buildSearchConditions() 函数,这很清楚)。
在多列中搜索条目
搜索多个列只需要对列内的搜索进行语法扩展。这个语法是:
filterText = '<displayName 1>:<lit 1>[|<lit 2>|..];<displayName 2>:<lit a>[|<lit b>|..][;..]'
有效的词法元素是分号';'分隔每一列 displayName。
继续这个例子,让我们在 10 月 30 日或 10 月 31 日搜索 nyt 或 nvda。看起来像:
从逻辑上讲,过滤器搜索(沿 Ticker 搜索 nyt OR nvda)AND(沿 Date 搜索 10-30 或 10-31)。
网格更新
我对来自单元格编辑的更新不太熟悉。我想结果是一样的。
当 angular-js 控制器与后端协同工作时,更新网格数据,然后将更新的数据推送 过滤器。这是一个漂亮的结果,实际上过滤器仍然存在。
已知错误 -- 清除
在撰写本文时,最近修复了一个已知错误,其中清除 filterText 几乎或确实会挂起浏览器。我关注的报告是这个:ng-grid issue 777。在ng-grid issue 848 之后合并了一个修复程序。我可以肯定地确认,当清除应用于大型数据集的过滤器时,我发现性能很差。我还没有测试修复。
更新
我刚刚开始安装 ng-grid 2.0.8。明确的问题已解决。效果很好。
ng-grid 3.0
ng-grid 3.0 现在正在设计中。 ng-grid 2.0 已经有很多优点了,但是就像任何真正新的代码一样,一些重写会有所帮助。我鼓励 ng-grid 开发人员保留他们已经包含的过滤器功能,并可能扩展性能或范围。