我正在使用AngularJS ng-grid( v2.0.7 v2.0.8),我想了解API中filterText字段的语法。
特别是我想知道如何过滤特定列或列,并过滤列中的一个或多个条目。
标签ng-grid和filter有很多堆栈溢出问题,虽然它们很有用,但是目前还没有提供filterText格式的完整摘要。
答案 0 :(得分:92)
在撰写本文时,没有总结如何构造'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寻找 nyt OR nvda ) AND (沿着日期为< em> 10-30 OR 10-31 )。
我不太熟悉来自单元格编辑的更新。我想结果是一样的。
当angular-js控制器与后端一起工作时,会更新网格数据,然后将通过过滤器推送更新的数据。这是一个美丽的结果,实际上过滤器仍然存在。
在撰写本文时,最近修复了一个已知错误,其中几乎清除了filterText或确实挂起了浏览器。我所遵循的报告就是这个:ng-grid issue 777。修复程序在ng-grid issue 848之后合并。我可以确定,当清除应用于大型数据集的过滤器时,我发现性能很差。我还没有测试过修复程序。
<强>更新强>
我刚刚开始安装ng-grid 2.0.8。明确的问题是固定的。效果很好。
ng-grid 3.0现在正在绘图板上。 ng-grid 2.0已经有了很多优点,但是像任何真正新的代码一样,一些重写有帮助。我鼓励ng-grid开发人员保留他们已经包含的过滤器功能,并可能扩展性能或范围。
答案 1 :(得分:9)
根据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);