如何在角度ui网格中捕获应用的列过滤器 [英] How to catch applied column filter in angular ui-grid
本文介绍了如何在角度ui网格中捕获应用的列过滤器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用ui-grid和服务器端过滤.对于每一列，我都会根据过滤器值向API发送带有参数的请求.默认情况下，参数为空
var filterOptions = {
filterBy: '&$filter=',
filterParam: ""
};
// and api call looks like
?$orderby=id-&pageSize=250&pageNbr=1&$filter=
如果设置了任何过滤器，我将发送下一个请求
param: filterOptions.filterParam = 'eventTypeId==' + evtTypeId
request: ?$orderby=id-&pageSize=250&pageNbr=1&$filter=eventTypeId==2
所以我想要的是一个非常简单的主意，我想检查是否已应用过滤器并发送类似
的请求?$orderby=id-&pageSize=250&pageNbr=1&$filter=eventTypeId==2,studyId==1
但是很遗憾，我无法捕获任何应用的过滤器.我很高兴有人可以帮助解决我的问题.
我的下面的代码
columnDef
$scope.gridOptions.columnDefs = [
{
field: 'title',
cellClass: getCellClass,
useExternalFiltering: true
}, {
field: 'description',
cellClass: getCellClass,
enableFiltering: true,
useExternalFiltering: true
}, {
displayName: 'Type',
field: 'eventType.name',
filter: {
selectOptions: $scope.eventType,
type: uiGridConstants.filter.SELECT
},
cellClass: getCellClass,
useExternalFiltering: true
}, {
displayName: 'Study Name',
field: 'study.name',
filter: {
selectOptions: $scope.study,
type: uiGridConstants.filter.SELECT
},
cellClass: getCellClass,
useExternalFiltering: true
}, {
displayName: 'Priority',
field: 'priority.name',
filter: {
selectOptions: $scope.priority,
type: uiGridConstants.filter.SELECT
},
cellClass: getCellClass,
useExternalFiltering: true
}, {
displayName: 'Severity',
field: 'severity.name',
filter: {
selectOptions: $scope.severity,
type: uiGridConstants.filter.SELECT
},
cellClass: getCellClass,
useExternalFiltering: true
}, {
displayName: 'Status',
field: 'status.name',
filter: {
selectOptions: $scope.status,
type: uiGridConstants.filter.SELECT
},
cellClass: getCellClass,
useExternalFiltering: true
}, {
displayName: 'Created',
field: 'occuredDate',
width: '12%',
filterHeaderTemplate: '<div class="row ui-grid-filter-container">' +
'<div ng-repeat="colFilter in col.filters" class="col-md-6 col-sm-6 col-xs-6">' +
'<div custom-grid-date-filter-header></div></div></div>',
filters: [
{
name: 'From',
condition: uiGridConstants.filter.GREATER_THAN_OR_EQUAL
},
{
name: 'To',
condition: uiGridConstants.filter.LESS_THAN_OR_EQUAL
}
],
cellFilter: 'date:"dd MMMM yyyy, h:mm:ss a"',
cellClass: getCellClass,
useExternalFiltering: false
}, {
displayName: 'Modified', field: 'createdDate',
width: '12%',
filterHeaderTemplate: '<div class="row ui-grid-filter-container">' +
'<div ng-repeat="colFilter in col.filters" class="col-md-6 col-sm-6 col-xs-6">' +
'<div custom-grid-date-filter-header></div></div></div>',
filters: [
{
name: 'From',
condition: uiGridConstants.filter.GREATER_THAN_OR_EQUAL
},
{
name: 'To',
condition: uiGridConstants.filter.LESS_THAN_OR_EQUAL
}
],
cellFilter: 'date:"dd MMMM yyyy, h:mm:ss a"',
cellClass: getCellClass,
useExternalFiltering: false
}
];
RegisterApi
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.selectRow($scope.gridOptions.data[0]);
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
paginationOptions.pageNbr = '&pageNbr=' + newPage ;
paginationOptions.pageSize = '&pageSize=' + pageSize;
getData();
});
gridApi.core.on.filterChanged( $scope, function() {
var grid = this.grid;
// Define behavior for cancel filtering
$scope.isfilterclear = true;
angular.forEach(grid.columns, function( col ) {
if(col.filters[0].term){
$scope.isfilterclear = false;
}
});
if($scope.isfilterclear) {
$timeout(function() {
$rootScope.refresh()
},500);
}
// Filter behavior
$scope.textFilter = grid.columns[1].filters[0].term;
if($scope.textFilter) {
$scope.$watch('textFilter', function (newVal, oldVal) {
filterOptions.filterParam = 'title==*' + newVal + "*";
}, true);
getData()
}
$scope.desFilter = grid.columns[2].filters[0].term;
if($scope.desFilter) {
$scope.$watch('desFilter', function (newVal, oldVal) {
filterOptions.filterParam = 'description==*' + newVal + "*";
}, true);
getData()
}
for (var et = 0; et < $scope.eventType.length; et ++){
var evtType = $scope.eventType[et].name;
var evtTypeId = $scope.eventType[et].id;
filterOptions.filterParam = 'eventTypeId==' + evtTypeId;
if( grid.columns[3].filters[0].term === evtType ) {
getData()
}
}
for (var stud = 0; stud < $scope.study.length; stud ++){
var study = $scope.study[stud].name;
var studyId = $scope.study[stud].id;
filterOptions.filterParam = 'studyId==' + studyId;
if( grid.columns[4].filters[0].term === study ) {
getData()
}
}
for (var pr = 0; pr < $scope.priority.length; pr ++){
var priority = $scope.priority[pr].name;
var priorityId = $scope.priority[pr].id;
filterOptions.filterParam = 'priorityId==' + priorityId;
if( grid.columns[5].filters[0].term === priority ) {
getData()
}
}
for (var sev = 0; sev < $scope.severity.length; sev ++){
var severity = $scope.severity[sev].name;
var severityId = $scope.severity[sev].id;
filterOptions.filterParam = 'severityId==' + severityId;
if( grid.columns[6].filters[0].term === severity ) {
getData()
}
}
for (var stat = 0; stat < $scope.status.length; stat ++){
var status = $scope.status[stat].name;
var statusId = $scope.status[stat].id;
filterOptions.filterParam = 'statusId==' + statusId;
if( grid.columns[7].filters[0].term === status ) {
getData()
}
}
});
getData()在哪里
var getData = function () {
eventService.getEventsWithParams(
sortOptions.orderBy,
sortOptions.directions,
paginationOptions.pageSize,
paginationOptions.pageNbr,
filterOptions.filterBy,
filterOptions.filterParam
)
.then(function (data) {
$scope.gridOptions.data = data;
// ***
angular.forEach($scope.gridOptions.data, function (val) {
val.occuredDate = new Date(val.occuredDate);
});
// $interval whilst we wait for the grid to digest the data we just gave it
$interval(function () {
$scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
}, 0, 1);
});
};
我的朋克车 (不幸的是，我无法提供真正的API，但是希望它能对您有所帮助)
解决方案
工作代码为
gridApi.core.on.filterChanged( $scope, function() {
// Declare vars
var grid = this.grid;
var columns = grid.columns;
$scope.columnTitle = grid.columns[1].filters[0].term;
$scope.columnDesc = grid.columns[2].filters[0].term;
var columnType = grid.columns[3].filters[0].term;
var columnStudy = grid.columns[4].filters[0].term;
var columnPriority = grid.columns[5].filters[0].term;
var columnSeverity = grid.columns[6].filters[0].term;
var columnStatus = grid.columns[7].filters[0].term;
var columnCreatedDate = grid.columns[8].filters[0].term;
var columnModifiedDate = grid.columns[9].filters[0].term;
// Create request for selectable filters
var query = [];
var string;
function request (id, param) {
if(param === "title==" || param === "description=="){
query.push(param + "*" + id + "*")
} else {
query.push(param + id);
}
if (query.length <= 1){
return query
} else {
string = query.join(";");
return string;
}
}
// Define behavior for cancel filtering
$scope.isfilterclear = true;
angular.forEach(columns, function( col ) {
if(col.filters[0].term){
$scope.isfilterclear = false;
}
});
if($scope.isfilterclear) {
$timeout(function() {
$rootScope.refresh()
},500);
}
// Filter behavior for columns
if($scope.columnTitle) {
$scope.$watch('columnTitle', function (newVal, oldVal) {
filterOptions.filterParam = request(newVal, 'title==*');
}, true);
getData()
}
if($scope.columnDesc) {
$scope.$watch('columnDesc', function (newVal, oldVal) {
filterOptions.filterParam = request(newVal, 'description==');
}, true);
getData()
}
if(columnType) {
filterOptions.filterParam = request(columnType, 'eventTypeId==');
getData();
}
if(columnStudy) {
filterOptions.filterParam = request(columnStudy, 'studyId==');
getData();
}
if(columnPriority) {
filterOptions.filterParam = request(columnPriority, 'priorityId==');
getData();
}
if(columnSeverity) {
filterOptions.filterParam = request(columnSeverity, 'severityId==');
getData();
}
if(columnStatus) {
filterOptions.filterParam = request(columnStatus, 'statusId==');
getData();
}
if(columnCreatedDate){
filterOptions.filterParam = request($rootScope.setFilterDate, 'occuredDate>=');
getData()
}
if(columnModifiedDate){
filterOptions.filterParam = request($rootScope.setFilterDate, 'occuredDate>=');
getData()
}
});
如您所见，我声明了带有两个参数的自定义函数，我在其中为每个调用提供请求参数，我不确定这种方式是否优雅，但是两周来我没有找到更好的解决方案
I'm working with ui-grid and server-side filtering. For each column I send a request to API with param based on filter value. By default param is empty
var filterOptions = {
filterBy: '&$filter=',
filterParam: ""
};
// and api call looks like
?$orderby=id-&pageSize=250&pageNbr=1&$filter=
if I setup any filter I send next request
param: filterOptions.filterParam = 'eventTypeId==' + evtTypeId
request: ?$orderby=id-&pageSize=250&pageNbr=1&$filter=eventTypeId==2
So what I want is pretty simple idea, I want to check if filter is already applied and send a request like
?$orderby=id-&pageSize=250&pageNbr=1&$filter=eventTypeId==2,studyId==1
but unfortunately I cannot catch any applied filters. I appreciate if somebody could help with my issue.
My code below
columnDef
$scope.gridOptions.columnDefs = [
{
field: 'title',
cellClass: getCellClass,
useExternalFiltering: true
}, {
field: 'description',
cellClass: getCellClass,
enableFiltering: true,
useExternalFiltering: true
}, {
displayName: 'Type',
field: 'eventType.name',
filter: {
selectOptions: $scope.eventType,
type: uiGridConstants.filter.SELECT
},
cellClass: getCellClass,
useExternalFiltering: true
}, {
displayName: 'Study Name',
field: 'study.name',
filter: {
selectOptions: $scope.study,
type: uiGridConstants.filter.SELECT
},
cellClass: getCellClass,
useExternalFiltering: true
}, {
displayName: 'Priority',
field: 'priority.name',
filter: {
selectOptions: $scope.priority,
type: uiGridConstants.filter.SELECT
},
cellClass: getCellClass,
useExternalFiltering: true
}, {
displayName: 'Severity',
field: 'severity.name',
filter: {
selectOptions: $scope.severity,
type: uiGridConstants.filter.SELECT
},
cellClass: getCellClass,
useExternalFiltering: true
}, {
displayName: 'Status',
field: 'status.name',
filter: {
selectOptions: $scope.status,
type: uiGridConstants.filter.SELECT
},
cellClass: getCellClass,
useExternalFiltering: true
}, {
displayName: 'Created',
field: 'occuredDate',
width: '12%',
filterHeaderTemplate: '<div class="row ui-grid-filter-container">' +
'<div ng-repeat="colFilter in col.filters" class="col-md-6 col-sm-6 col-xs-6">' +
'<div custom-grid-date-filter-header></div></div></div>',
filters: [
{
name: 'From',
condition: uiGridConstants.filter.GREATER_THAN_OR_EQUAL
},
{
name: 'To',
condition: uiGridConstants.filter.LESS_THAN_OR_EQUAL
}
],
cellFilter: 'date:"dd MMMM yyyy, h:mm:ss a"',
cellClass: getCellClass,
useExternalFiltering: false
}, {
displayName: 'Modified', field: 'createdDate',
width: '12%',
filterHeaderTemplate: '<div class="row ui-grid-filter-container">' +
'<div ng-repeat="colFilter in col.filters" class="col-md-6 col-sm-6 col-xs-6">' +
'<div custom-grid-date-filter-header></div></div></div>',
filters: [
{
name: 'From',
condition: uiGridConstants.filter.GREATER_THAN_OR_EQUAL
},
{
name: 'To',
condition: uiGridConstants.filter.LESS_THAN_OR_EQUAL
}
],
cellFilter: 'date:"dd MMMM yyyy, h:mm:ss a"',
cellClass: getCellClass,
useExternalFiltering: false
}
];
RegisterApi
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.selectRow($scope.gridOptions.data[0]);
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
paginationOptions.pageNbr = '&pageNbr=' + newPage ;
paginationOptions.pageSize = '&pageSize=' + pageSize;
getData();
});
gridApi.core.on.filterChanged( $scope, function() {
var grid = this.grid;
// Define behavior for cancel filtering
$scope.isfilterclear = true;
angular.forEach(grid.columns, function( col ) {
if(col.filters[0].term){
$scope.isfilterclear = false;
}
});
if($scope.isfilterclear) {
$timeout(function() {
$rootScope.refresh()
},500);
}
// Filter behavior
$scope.textFilter = grid.columns[1].filters[0].term;
if($scope.textFilter) {
$scope.$watch('textFilter', function (newVal, oldVal) {
filterOptions.filterParam = 'title==*' + newVal + "*";
}, true);
getData()
}
$scope.desFilter = grid.columns[2].filters[0].term;
if($scope.desFilter) {
$scope.$watch('desFilter', function (newVal, oldVal) {
filterOptions.filterParam = 'description==*' + newVal + "*";
}, true);
getData()
}
for (var et = 0; et < $scope.eventType.length; et ++){
var evtType = $scope.eventType[et].name;
var evtTypeId = $scope.eventType[et].id;
filterOptions.filterParam = 'eventTypeId==' + evtTypeId;
if( grid.columns[3].filters[0].term === evtType ) {
getData()
}
}
for (var stud = 0; stud < $scope.study.length; stud ++){
var study = $scope.study[stud].name;
var studyId = $scope.study[stud].id;
filterOptions.filterParam = 'studyId==' + studyId;
if( grid.columns[4].filters[0].term === study ) {
getData()
}
}
for (var pr = 0; pr < $scope.priority.length; pr ++){
var priority = $scope.priority[pr].name;
var priorityId = $scope.priority[pr].id;
filterOptions.filterParam = 'priorityId==' + priorityId;
if( grid.columns[5].filters[0].term === priority ) {
getData()
}
}
for (var sev = 0; sev < $scope.severity.length; sev ++){
var severity = $scope.severity[sev].name;
var severityId = $scope.severity[sev].id;
filterOptions.filterParam = 'severityId==' + severityId;
if( grid.columns[6].filters[0].term === severity ) {
getData()
}
}
for (var stat = 0; stat < $scope.status.length; stat ++){
var status = $scope.status[stat].name;
var statusId = $scope.status[stat].id;
filterOptions.filterParam = 'statusId==' + statusId;
if( grid.columns[7].filters[0].term === status ) {
getData()
}
}
});
Where getData() is
var getData = function () {
eventService.getEventsWithParams(
sortOptions.orderBy,
sortOptions.directions,
paginationOptions.pageSize,
paginationOptions.pageNbr,
filterOptions.filterBy,
filterOptions.filterParam
)
.then(function (data) {
$scope.gridOptions.data = data;
// ***
angular.forEach($scope.gridOptions.data, function (val) {
val.occuredDate = new Date(val.occuredDate);
});
// $interval whilst we wait for the grid to digest the data we just gave it
$interval(function () {
$scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
}, 0, 1);
});
};
my plunker (unfortunately I cannot provide the real API, but hope it will help anyhow)
解决方案
The working code is
gridApi.core.on.filterChanged( $scope, function() {
// Declare vars
var grid = this.grid;
var columns = grid.columns;
$scope.columnTitle = grid.columns[1].filters[0].term;
$scope.columnDesc = grid.columns[2].filters[0].term;
var columnType = grid.columns[3].filters[0].term;
var columnStudy = grid.columns[4].filters[0].term;
var columnPriority = grid.columns[5].filters[0].term;
var columnSeverity = grid.columns[6].filters[0].term;
var columnStatus = grid.columns[7].filters[0].term;
var columnCreatedDate = grid.columns[8].filters[0].term;
var columnModifiedDate = grid.columns[9].filters[0].term;
// Create request for selectable filters
var query = [];
var string;
function request (id, param) {
if(param === "title==" || param === "description=="){
query.push(param + "*" + id + "*")
} else {
query.push(param + id);
}
if (query.length <= 1){
return query
} else {
string = query.join(";");
return string;
}
}
// Define behavior for cancel filtering
$scope.isfilterclear = true;
angular.forEach(columns, function( col ) {
if(col.filters[0].term){
$scope.isfilterclear = false;
}
});
if($scope.isfilterclear) {
$timeout(function() {
$rootScope.refresh()
},500);
}
// Filter behavior for columns
if($scope.columnTitle) {
$scope.$watch('columnTitle', function (newVal, oldVal) {
filterOptions.filterParam = request(newVal, 'title==*');
}, true);
getData()
}
if($scope.columnDesc) {
$scope.$watch('columnDesc', function (newVal, oldVal) {
filterOptions.filterParam = request(newVal, 'description==');
}, true);
getData()
}
if(columnType) {
filterOptions.filterParam = request(columnType, 'eventTypeId==');
getData();
}
if(columnStudy) {
filterOptions.filterParam = request(columnStudy, 'studyId==');
getData();
}
if(columnPriority) {
filterOptions.filterParam = request(columnPriority, 'priorityId==');
getData();
}
if(columnSeverity) {
filterOptions.filterParam = request(columnSeverity, 'severityId==');
getData();
}
if(columnStatus) {
filterOptions.filterParam = request(columnStatus, 'statusId==');
getData();
}
if(columnCreatedDate){
filterOptions.filterParam = request($rootScope.setFilterDate, 'occuredDate>=');
getData()
}
if(columnModifiedDate){
filterOptions.filterParam = request($rootScope.setFilterDate, 'occuredDate>=');
getData()
}
});
As you can see, I declared custom function with two params where I'm providing my request param for each call, I'm not sure about elegancy of this way but for two week I didn't find better solution
这篇关于如何在角度ui网格中捕获应用的列过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
