AngularJS ng-grid filter - filterText格式

Question

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

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

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

Answer 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日相关的记录。

让我们扩大搜索范围。 要搜索10月30日或 10月31日，语法是

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 for nyt OR nvda ） AND （沿着日期10-30 或 10-31 ）。

网格更新

我不太熟悉来自单元格编辑的更新。 我想结果是一样的。

当angular-js控制器与后端一起工作时，更新网格数据，然后通过过滤器推送更新的数据。 这是一个美丽的结果，实际上过滤器仍然存在。

已知错误 - 清除

在撰写本文时，最近修复了一个已知错误，其中几乎清除了filterText或者确实挂起了浏览器。 我所遵循的报告就是这个： ng-grid issue 777 。 在ng-grid issue 848之后合并了一个修复程序。 我可以确定，当清除应用于大型数据集的过滤器时，我发现性能很差。 我还没有测试过修复程序。

UPDATE

我刚刚开始安装ng-grid 2.0.8。 明确的问题是固定的。 效果很好。

---

ng-grid 3.0

ng-grid 3.0现在正在绘图板上。 ng-grid 2.0已经有了很多优点，但是像任何真正新的代码一样，一些重写有帮助。 我鼓励ng-grid开发人员保留他们已经包含的过滤器功能，并可能扩展性能或范围。

Answer 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);