AngularJS NG网过滤器 - filterText格式 [英] AngularJS ng-grid filter -- filterText format

问题描述

我使用的是AngularJS NG网（<击> V2.0.7 V2.0.8），我想了解该API的filterText领域的语法。

I am using the AngularJS ng-grid (v2.0.7 v2.0.8) and I would like to understand the syntax for the filterText field in the API.

在特定我想知道如何为特定的一列或多列进行过滤，并在一列过滤的一个或多个条目。

In particular I would like to know how to filter on a specific column or columns, and filter one or more entries in a column.

有带标记NG网和过滤许多堆栈溢出的问题，虽然他们是有用的，一个给filterText格式的全面总结当前不可用。

There are many stack overflow questions with tags ng-grid and filter, and while they are useful, one that gives a full summary of the filterText format is not currently available.

推荐答案

在写这篇文章的时候有如何构造一般filterText字符串没有总结。研究NG-grid.js code和做一些猜测后，我发现，'filterText'是更强大和前pressive比当前文档建议。

At the time of this writing there is no summary on how to construct the 'filterText' string in general. After studying the ng-grid.js code and making some guesses I have found that 'filterText' is much more powerful and expressive than the current documentation suggests.

要设置的答案，首先考虑用下面的定义一格，位于某个控制器：

To set up the answer, first consider a grid with the following definition, located in some controller:

  $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
  };

在数据['记录']对象可以是后端发送一些JSON对象。样本表可能是这样的：

The object at data['records'] can be some json object sent from the backend. A sample table might look like this:

既然这样，filterText是空白的，因此所有记录都presented。

As it stands, filterText is blank so all records are presented.

在网格的右上角向下胡萝卜是可见的，因为showFilter是真实的。点击向下胡萝卜示出了绑定到变量'filterText'的输入。为了便于讨论，我将展示使用此下拉了一定的效果，但一般你可以直接分配给filterText在控制器code。下拉看起来是这样的：

The down carrot in the upper right of the grid is visible because showFilter is true. Clicking on the down carrot shows an input that is bound to the variable 'filterText'. For this discussion I'll show some results using this dropdown, but generally you can directly assign to filterText in your controller code. The dropdown looks like this:

在默认情况下，filterText对执行网格中的每一个细胞一个正则表达式。在字符输入一个将选择具有'a'的该记录的任何条目（或列）的字符中的所有记录。键入'AB'选择那些在该记录中的任何条目中的字符序列'AB'的所有记录。根据您的要求，这种行为可能是完全合适的。然而，具有大的数据集，人们通常需要过滤列上，而不是整个网格因为数据的性质（例如，选择一价股票）和由于搜索整个网格的高成本。

By default, filterText executes a regex against every cell in the grid. Typing in the character 'a' selects all records that have the character 'a' in any entry (or column) of that record. Typing 'ab' selects all records that have the character sequence 'ab' in any entry of that record. Depending on your requirements, this behavior may be perfectly suitable. However, with large data sets, one typically wants to filter on columns rather than the whole grid because of the nature of the data (e.g. select a price ticker) and because of the high cost of searching the whole grid.

为了寻找在刚一列字符串或正则表达式，则filterText语法是：

In order to search for a string or regex on just one column, the filterText syntax is:

filterText = '<displayName>:<literal>'

例如，

下面的显示名日期（不使用字段的值，则必须使用显示名），后跟一个冒号：，然后部分字符串。其结果是，只有三个记录被选择时，与10月30日相关的那些。

Here the displayName 'Date' (don't use the field value, you must use displayName) is followed by a colon ':' and then a partial string. The result is that only three records are selected, those associated with Oct 30th.

让我们展开搜索。要搜索10月30日的或的10月31日，语法是

Let's expand the search. To search for Oct 30th or Oct 31st, the syntax is

filterText = '<displayName>:<literal 1>|<literal 2>|...'

其中一个管道|分隔每个字符串部分。你可以连续但是尽可能多的，只要你喜欢。多最新的过滤可能看起来像：

where a pipe '|' separates each string partial. You can chain together however as many as you like. A multi-date filter might look like:

显然，选择是或在自然。我的例子不是很大，但是，因为行情和日期有不相交的字符。所以，你可以信任我，只有日期栏搜索或设置自己的例子。 （或者更好的是，阅读buildSearchConditions（）函数在NG-格，其pretty明确这一点）。

Clearly the selection is OR in nature. My example is not great, however, because tickers and dates have disjoint characters. So you can either trust me that only the Date column is searched or setup your own example. (Or, better still, read the buildSearchConditions() function in ng-grid, its pretty clear on this).

在搜索多个列只需要一列内的搜索的句法扩展。这个语法是：

Searching multiple columns requires only a syntax extension of the search within a column. This syntax is:

filterText = '<displayName 1>:<lit 1>[|<lit 2>|..];<displayName 2>:<lit a>[|<lit b>|..][;..]'

手术词汇元素是分号;分隔每列显示名。

The operative lexical element is the semicolon ';' that separates each column displayName.

继续这个例子，让我们寻找在10月30日或10月31日纽约时报或NVDA。这看起来像：

Continuing on with this example, let's search for nyt or nvda on Oct 30th or Oct 31st. That looks like:

按道理，过滤器搜索（沿北京时间为的纽约时报的或 NVDA 的）和（沿日期 10-30 的或 10-31 的）。

Logically, the filter searches (along Ticker for nyt OR nvda) AND (along Date for 10-30 OR 10-31).

我不太熟悉这个来自细胞的编辑更新。我想，结果是一样的。

I am not too familiar with updates that come from cell edits. I suppose that the result is the same.

当所述角度的js控制器，在与后端协同工作，更新网格数据，然后将更新的数据被按压的到的过滤器。这是一个美丽的结果，实际上过滤器仍然存在。

When the angular-js controller, working in conjunction with the backend, updates the grid data, then the updated data is pushed through the filter. This is a beautiful result, in effect the filter persists.

在写这篇文章的时候有一个最新修补程序以一个已知的bug，其中清除filterText几乎或确实挂起浏览器。我已经按照该报告是这样的： NG网问题777 。一个修复程序被合并以下 NG网问题848 。我可以肯定地确认，我看到的性能较差，当应用于大型数据集的过滤器被清除。我没有测试该修补程序呢。

At the time of this writing there is a recent fix to a known bug wherein clearing the filterText nearly or does indeed hang the browser. The report that I've followed is this one: ng-grid issue 777 . A fix was merged following ng-grid issue 848. I can definitely confirm that I see poor performance when a filter applied to a large dataset is cleared. I haven't tested the fix yet.

更新

我只是抽时间去安装NG-格2.0.8。清晰的问题是固定的AFAICT。伟大的作品。

I just got around to installing ng-grid 2.0.8. The clear problem is fixed afaict. Works great.

纳克网3​​.0是在画板上了。有一个在NG-电网2.0这么多善良了，但像任何code这是真正的新，几个重写帮助。我鼓励NG-电网开发，以保持他们已经包括了过滤器的功能，也许延伸性能或范围。

ng-grid 3.0 is on the drawing board now. There is so much goodness in ng-grid 2.0 already, but like any code that's really new, a few rewrites help. I encourage the ng-grid developers to keep the filter features they have already included and perhaps extend the performance or range.

这篇关于AngularJS NG网过滤器 - filterText格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！