如文档所述,我已经使用ui网格实现了单个过滤器。 http://ui-grid.info/docs/#/tutorial/321_singleFilter
但是我有一个cellFilter,当我过滤时,它过滤数据,而不是使用过滤器渲染数据。对于最终用户这是错误的。
例如,在这个监听器中,我想过滤“男性”或“女性”输入。
http://plnkr.co/edit/TNJSlc0QkBI8Tu2Jejam?p=preview
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
var today = new Date();
$scope.gridOptions = {
enableFiltering: false,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
$scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 );
},
columnDefs: [
{ field: 'name' },
{ field: 'gender', cellFilter: 'mapGender' },
{ field: 'company' },
{ field: 'email' },
{ field: 'phone' },
{ field: 'age' },
{ field: 'mixedDate' }
]
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function(data) {
$scope.gridOptions.data = data;
$scope.gridOptions.data[0].age = -5;
data.forEach( function addDates( row, index ){
row.mixedDate = new Date();
row.mixedDate.setDate(today.getDate() + ( index % 14 ) );
row.gender = row.gender==='male' ? '1' : '2';
});
});
$scope.filter = function() {
$scope.gridApi.grid.refresh();
};
$scope.singleFilter = function( renderableRows ){
var matcher = new RegExp($scope.filterValue);
renderableRows.forEach( function( row ) {
var match = false;
[ 'name', 'company', 'email', 'gender' ].forEach(function( field ){
//row.entity[field] for gender col is 1 or 2 instead of male or female
if ( row.entity[field].match(matcher) ){
match = true;
}
});
if ( !match ){
row.visible = false;
}
});
return renderableRows;
};
}])
.filter('mapGender', function() {
var genderHash = {
1: 'male',
2: 'female'
};
return function(input) {
if (!input){
return '';
} else {
return genderHash[input];
}
};
});
最佳答案
有一个名为filterCellFiltered
的单元格选项,您可以将其应用于columnDefs:
{ field: 'gender', cellFilter: 'mapGender', filterCellFiltered: true },
然后,uiGrid将在应用“搜索”过滤器之前应用cellFilter。不幸的是,此选项仅适用于columnFilters。但是我们仍然可以在singleFilter代码中使用它来检查是否要与常规值或过滤后的值匹配。
不知道这是否是最好的方法,但这是我的解决方案:
$scope.singleFilter = function( renderableRows ){
var matcher = new RegExp($scope.filterValue);
renderableRows.forEach( function( row ) {
var match = false;
row.grid.columns.forEach(function( column ){
// get the filtered value, if filterCellFiltered option is set
var value;
if ( column.filterCellFiltered ){
value = row.grid.getCellDisplayValue(row, column);
} else {
value = row.grid.getCellValue(row, column);
}
if ( value.toString().match(matcher) ){
match = true;
}
});
if ( !match ){
row.visible = false;
}
});
return renderableRows;
};