ngGrid多列筛选 [英] ngGrid Multi Column Filtering
问题描述
我现在用的是ngGrid模块AngularJS表现出一些分页数据。我希望能够在多个列上进行搜索，但是使用或搜索。
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.
可以说，我有以下标题列：ID，名称，描述。当我搜索我想回到那里要么标识或名称或说明中包含搜索词的所有行。
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.
$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
}
};
我已经使用默认的搜索框，还使用绑定到$ scope.filterText外部输入对话框来定义自定义过滤器尝试，如：
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.filterUpdated = function () {
$scope.gridOptions.filterOptions.filterText = 'id:' + $scope.filterText + ';name:' + $scope.filterText + ';description:' + $scope.filterText;
};
不过，这似乎对所有的列做一个AND。是否可以达到我想要使用ngGrid模块是什么？
However this seems to do an AND on all of the columns. Is it possible to achieve what I want using the ngGrid module?
由于提前，
克里斯
推荐答案
是它可能做一个或过滤器，但在NG-栅源$ C $ C搜索之后，我看不出它如何能够做到用他们的 filterOptions.filterText 。这可以做，只过滤
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.
解决办法是再使用 filterOptions.useExternalFilter：真正的
我还没有发现这样的例子，但与玩弄了一会儿后，我得到的概念，过滤器实际上是由重新创建 gridOptions.data 对象|排列。的这是唯一的缺点过滤器的
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.data object|array. That is the only downside to this filter.
Plunker code is here
所以基本上你的code是这样的 index.html的
So basically your code would look like this 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>
和在 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
};
});
这只是基本的过滤（使用正则表达式和/或转换为小写为更好的匹配）。还要注意的是，如果这两个名字和年龄都是空的我设置的名称是''，然后每一个元素将过滤器（导致整个数据集返回）内返回true。
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).
这个选项更适合为动态数据集（的阅读 - 服务器喂的），但它工作得很好，但复制的原始数据集并在其上应用过滤器
This option is much better suited to dynamic dataset (read - server fed), but it works just as well but replicating the original dataset and applying the filters on it.
这篇关于ngGrid多列筛选的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
