javascript ngGrid 多列过滤
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16846678/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ngGrid Multi Column Filtering
提问by Chris Haines
I am using the ngGrid module for AngularJS to show some paged data. I want to be able to search across multiple columns, however using an OR search.
我正在使用 AngularJS 的 ngGrid 模块来显示一些分页数据。我希望能够跨多列进行搜索，但是使用 OR 搜索。
Lets say I have a column with the following headings: Id, Name, Description. When I search I want to return all rows where either Id OR name OR description contain the search term.
假设我有一列标题如下：Id、Name、Description。当我搜索时，我想返回 Id OR name OR description 包含搜索词的所有行。
$scope.pagingOptions = {
pageSizes: [20, 50, 100],
pageSize: 20,
totalServerItems: 0,
currentPage: 1
};
$scope.gridOptions =
{
data: 'myData',
columnDefs: [
{ field: 'id', displayName: 'Id' },
{ field: 'name', displayName: 'Name' },
{ field: 'description', displayName: 'Description' },
{ displayName: 'Actions', cellTemplate: '<input type="button" data-ng-click="doSomething(row.entity)" value="Do Something" />'}],
enablePaging: true,
showFooter: true,
showFilter: true,
pagingOptions: $scope.pagingOptions,
filterOptions: {
filterText: "",
useExternalFilter: false
}
};
I have tried using the default search box, and also using an external input box bound to $scope.filterText to define a custom filter such as:
我尝试使用默认搜索框，并使用绑定到 $scope.filterText 的外部输入框来定义自定义过滤器，例如：
$scope.filterUpdated = function () {
$scope.gridOptions.filterOptions.filterText = 'id:' + $scope.filterText + ';name:' + $scope.filterText + ';description:' + $scope.filterText;
};
However this seems to do an AND on all of the columns. Is it possible to achieve what I want using the ngGrid module?
但是，这似乎对所有列执行 AND。是否可以使用 ngGrid 模块实现我想要的？
Thanks in advance,
提前致谢，
Chris
克里斯
采纳答案by Gilad Peleg
Yes it's possible to do an OR filter, but after searching in the ng-grid source code I can't see how it can be done using their filterOptions.filterText. That can do AND filtering only.
是的，可以使用 OR 过滤器，但是在搜索 ng-grid 源代码后，我看不到如何使用他们的filterOptions.filterText. 那只能做 AND 过滤。
The solution would be then to use filterOptions.useExternalFilter:true
解决方案是然后使用 filterOptions.useExternalFilter:true
I also found no examples of it, but after playing around with that for a bit, I got the notion that the filter is actually done by re-creating the gridOptions.dataobject|array. That is the only downside to this filter.
我也没有找到它的例子，但是在玩了一会儿之后，我得到了过滤器实际上是通过重新创建gridOptions.data对象|数组来完成的概念。这是此过滤器的唯一缺点。
So basically your code would look like this index.html:
所以基本上你的代码看起来像这样index.html：
<body ng-controller="MyCtrl">
<strong>Filter Name:</strong> </string><input type="text" ng-model="filterName"/>
</br>
OR
</br>
<strong>Filter Age:</strong> </string><input type="text" ng-model="filterAge"/>
</br>
<button ng-click="activateFilter()">Run Filter</button>
<br/>
<br/>
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
And in your controller.js:
在你的controller.js 中：
app.controller('MyCtrl', function($scope) {
$scope.filterOptions = {
filterText: '',
useExternalFilter: true
};
$scope.activateFilter = function() {
var name = $scope.filterName || null;
var age = ($scope.filterAge) ? $scope.filterAge.toString() : null;
if (!name && !age) name='';
$scope.myData = angular.copy($scope.originalDataSet, []);
$scope.myData = $scope.myData.filter( function(item) {
return (item.name.indexOf(name)>-1 || item.age.toString().indexOf(age) > -1);
});
};
$scope.originalDataSet = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.myData = angular.copy($scope.originalDataSet, []);
$scope.gridOptions = {
data: 'myData',
filterOptions: $scope.filterOptions
};
});
That's just basic filtering (use regex and/or convert to lowercase for better matching). Also note that if both name and age are empty I set name to be '' and then every element would return true inside the filter (resulting in the whole dataset return).
这只是基本过滤（使用正则表达式和/或转换为小写以更好地匹配）。另请注意，如果 name 和 age 都为空，我将 name 设置为 '' 然后每个元素将在过滤器内返回 true （导致整个数据集返回）。
This option is much better suited to dynamicdataset (read - server fed), but it works just as well but replicating the original dataset and applying the filters on it.
此选项更适合动态数据集（读取服务器馈送），但它也能正常工作，但复制原始数据集并在其上应用过滤器。
