我有一些使用Angular UI-Grid的数据,我想使用单个过滤器按钮过滤单个列值。
过滤器输入有效但过滤器按钮不起作用。是否有可能实用的过滤按钮?
Plunker :http://plnkr.co/edit/R6PhMiBbaeqj9ErjdvY1?p=preview
HTML:
<div ng-controller="MainCtrl">
<p><button ng-click='filterBtn()'>Filter for "Company = Mixers"</button></p>
<p><input ng-model='filterValue'/><button ng-click='filter()'>Filter</button></p>
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
JS:
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: 'company' }
]
};
$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.filterText = 'Mixers';
$scope.filterBtn = function() {
$scope.gridApi.grid.columns[1].filters[0] = {
condition: uiGridConstants.filter.EXACT,
term: 'Mixers'
};
$scope.gridOptions.enableFiltering = true
$scope.gridApi.grid.refresh();
}
$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' ].forEach(function( field ){
if ( row.entity[field].match(matcher) ){
match = true;
}
});
if ( !match ){
row.visible = false;
}
});
return renderableRows;
};
}]);
答案 0 :(得分:3)
好的,我可以使用两个按钮:
http://plnkr.co/edit/25r5aBC0wAtDTEE8gOcO?p=preview
$scope.filterText = '';
$scope.filterBtn = function() {
$scope.filterText = 'Mixers';
$scope.gridApi.grid.refresh();
}
$scope.filter = function() {
$scope.filterText = $scope.filterValue;
$scope.gridApi.grid.refresh();
};
答案 1 :(得分:0)
控制器:
/**
* Appuser User Controller
*/
(function() {
Appuser.controller('AppuserColumnFilterModalCtrl', function( $scope, $compile, $timeout,$rootScope ,uiGridConstants,$translate,localStorageService,coriUtility) {
var $elm;
$scope.showitem=true;
$scope.showcolor=true;
angular.forEach($scope.$parent.grid.columns, function (value, key) {
if($scope.$parent.col.colDef.field ==value.field)
{
var value= coriUtility.getfiltercheck(value.field);
if(value)
{
$scope.showitem =false;
}
else {
$scope.showitem =true;
}
}
});
$scope.showFilterModal = function() {
$scope.listOfFilters = [];
$scope.columnname=$scope.col.colDef.field;
$scope.columnnameDisplay=$scope.col.colDef.displayName;
$scope.col.grid.rows.forEach( function ( row ) {
// if(row.entity[$scope.columnname]==$scope.columnname) {
if(row.entity[$scope.columnname]==null)
{
row.entity[$scope.columnname]='-';
}
if ($scope.listOfFilters.indexOf(row.entity[$scope.columnname]) === -1) {
$scope.listOfFilters.push(row.entity[$scope.columnname]);
}
//}
});
$scope.listOfFilters.sort();
$scope.gridOptions = {
data: [],
enableColumnMenus: false,
enableFiltering: true,
field: $scope.columnname,
displayName: $scope.columnnameDisplay,
headerCellFilter: 'translate',
headerCellClass: 'ui-grid-header-with-filter ui-gridcustom',
placeholder: $scope.columnnameDisplay,
columnLocalType: 'filter',
filter:
{ placeholder: $scope.columnnameDisplay,
filterName: "containsFilter",
condition: uiGridConstants.filter.CONTAINS,
},
onRegisterApi: function( gridApi) {
$scope.gridApi = gridApi;
if ( $scope.colFilter && $scope.colFilter.listTerm ){
$timeout(function() {
$scope.colFilter.listTerm.forEach( function( column ) {
if(column==null){ column="."}
var entities = $scope.gridOptions.data.filter( function( row ) {
if(row.column==null|| row.column==".") row.column="-";
return row.column === column;
});
if( entities.length > 0 ) {
$scope.gridApi.selection.selectRow(entities[0]);
}
});
});
}
}
};
$scope.listOfFilters.forEach(function( column ) {
$scope.gridOptions.data.push({column: column});
});
var html = '<div class="modal" ng-style="{display: \'block\'}"><div class="modal-dialog"><div class="modal-content custompopup"><div class="modal-header">{{ columnnameDisplay | translate }}</div><div class="modal-body"><div id="grid1" ui-grid="gridOptions" ui-grid-selection class="modalGrid"></div></div><div class="modal-footer"><button id="buttonReset" class="btn btn-primary" ng-click="reset()">{{ "COMMONFILTERBUTTONRESET" | translate }}</button><button id="buttonClose" class="btn btn-primary" ng-click="close()">{{ "COMMONFILTERBUTTONFILTER" | translate }}</button></div></div></div></div>';
$elm = angular.element(html);
angular.element(document.body).prepend($elm);
$compile($elm)($scope);
};
$scope.close = function() {
var columns = $scope.gridApi.selection.getSelectedRows();
$scope.colFilter.listTerm;
$scope.colFilter.listTerm = [];
$scope.filternull="";
columns.forEach( function( column ) {
if(column.column==null || column.column=="" )column.column="-";
$scope.colFilter.listTerm.push( column.column );
});
$scope.colFilter.term = $scope.colFilter.listTerm.join(', ');
if($scope.colFilter.term.length>0)
{
$scope.showitem=false;
}
else {
$scope.showitem=true;
}
// $scope.colFilter.condition =2;
if($scope.colFilter.listTerm.length==1)
{
$scope.colFilter.condition = uiGridConstants.filter.EXACT;
}
else {
$scope.colFilter.condition = new RegExp($scope.colFilter.listTerm.join('|'));
}
if ($elm) {
$elm.remove();
}
};
$scope.reset = function() {
var columns = $scope.gridApi.selection.getSelectedRows();
$scope.colFilter.listTerm = [];
$scope.filternull="";
$scope.colFilter.term = "";
if($scope.colFilter.term.length>0)
{
$scope.showitem=false;
}
else {
$scope.showitem=true;
}
$scope.colFilter.condition = new RegExp($scope.colFilter.listTerm.join('|'));
$scope.gridApi.selection.clearSelectedRows();
if ($elm) {
$elm.remove();
}
};
if( $scope.showitem==false){
}
}).directive('filterCustomModal', function() {
return {
restrict: "A",
template: '<div style="font-size: 14px; padding-right: 0px; padding-bottom: 2px;float: right !important;" ><md-icon class="pull-left" ng-if="showitem" style="font-size: 14px;color: silver;" ng-click="showFilterModal()">filter_list</md-icon> <md-icon class="pull-left" ng-if="!showitem" style="font-size: 14px;font-weight: bold;color: #008080;" ng-click="showFilterModal()">filter_list</md-icon> </div>',
controller: 'AppuserColumnFilterModalCtrl',
};
});// Appuser Area Controller
}).call(this);
==================================
HTML
in gridoption:
Let columndefination: {
field: 'columnname',
displayName: 'CONTROLLER_GRID_COLUMNNAME',
placeholder: 'CONTROLLER_GRID_COLUMNNAME',
headerTooltip:
function( col ) {
return ' ' + col.displayName;
},
headerCellFilter: 'translate',
filterHeaderTemplate: '<div class="uigrid-customfilter" ng-repeat="colFilter in col.filters"><div filter-custom-modal style="right !important;"></div></div>',
}