AngularJS ng-grid 过滤器——filterText 格式

Posted 2023-02-27

【中文标题】AngularJS ng-grid 过滤器——filterText 格式

【英文标题】：AngularJS ng-grid filter -- filterText format

【发布时间】：2013-12-24 09:44:17

【问题描述】：

我正在使用 AngularJS ng-grid (v2.0.7 v2.0.8)，我想了解 API 中 filterText 字段的语法。

我特别想知道如何过滤一个或多个特定列，并过滤一列中的一个或多个条目。

有许多带有 ng-grid 和 filter 标签的堆栈溢出问题，虽然它们很有用，但目前还没有提供 filterText 格式的完整摘要的问题。

【参考方案1】：

在撰写本文时，还没有关于如何构造“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 开发人员保留他们已经包含的过滤器功能，并可能扩展性能或范围。

【讨论】：

一个很好的答案 - 我希望它在 ngGrid Wiki github.com/angular-ui/ng-grid/wiki/Sorting-and-filtering 它解决了一个难题。我的用户需要搜索包含冒号“：”字符的字符串，这些字符恰好在我的网格数据集中很普遍。通过修改用户的搜索字符串使 ':' 和 ';'被转义的等价物替换，如下所示：filterOptions.filterText = srchTxt.replace(/:/g, "\\x3a").replace(/;/g, "\\x3b"); 我能够解决问题。

@JayInNyc 谢谢你的回答。我的一个问题是；有没有办法对多列进行“或”运算而不是“与”？

@ChiRow 我唯一的参考是这个答案：***.com/questions/16846678/…。他们说filterOptions.filterText 不能用于 OR 过滤器。有很多人提出过这个要求。我建议您前往 freenode 上的#ng-grid 并提出请求。这将是一个很棒的功能。

非常感谢。请注意 - 对我来说，这也可以使用字段名称而不是 displayName。不知道为什么，也许 ng-grid 已经改进了。

@Martin 嗨，马丁。你用的是什么版本？ ng-grid 确实在继续前进。另外，您的 fieldNames 实际上与您的 displayNames 相同吗？否则它确实让我有点吃惊，至少对于 v2.0.8 来说是这样。再说一次，这些天我几乎没有感到惊讶。

【参考方案2】：

根据 JayInNyc 的回答，我做了一些事情来让用户更容易使用，而不是遵循该语法。我基本上会查看我想要过滤的任何字段。在这种情况下，我有一个名称和城市的输入字段。

$scope.filterOptions = 
    filterText: ''
;
$scope.filterName = '';
$scope.filterCity = '';

$scope.$watch('filterName', function (value) 

    setFilterText();
);

$scope.$watch('filterCity', function (value) 

    setFilterText();
);

function setFilterText()

    $scope.filterOptions.filterText = 'Name: ' + $scope.filterName + ';City:' + $scope.filterCity;

顺便说一句-我想使用编译功能，但它似乎不起作用。我有以下但没有用。

filterOptions.filterText = $compile('Name:filterName;Category:filterCategory')(scope);