如何在角度 ui-grid 中捕获应用的列过滤器
[英] How to catch applied column filter in angular ui-grid
本文介绍了如何在角度 ui-grid 中捕获应用的列过滤器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 ui-grid 和服务器端过滤.对于每一列，我根据过滤器值向带有参数的 API 发送请求.默认参数为空
var filterOptions = {filterBy: '&$filter=',过滤参数:"};//和 api 调用看起来像?$orderby=id-&pageSize=250&pageNbr=1&$filter=
如果我设置了任何过滤器，我就会发送下一个请求
param: filterOptions.filterParam = 'eventTypeId==' + evtTypeId请求:?$orderby=id-&pageSize=250&pageNbr=1&$filter=eventTypeId==2
所以我想要的是非常简单的想法，我想检查是否已经应用过滤器并发送像
这样的请求
?$orderby=id-&pageSize=250&pageNbr=1&$filter=eventTypeId==2,studyId==1
但不幸的是我无法捕获任何应用的过滤器.如果有人可以帮助解决我的问题，我将不胜感激.
我的代码如下
列定义
$scope.gridOptions.columnDefs = [{字段:'标题'，细胞类:getCellClass，useExternalFiltering: 真}, {字段:'说明'，细胞类:getCellClass，启用过滤:真，useExternalFiltering: 真}, {显示名称:'类型'，字段:'eventType.name'，筛选: {选择选项:$scope.eventType，类型:uiGridConstants.filter.SELECT},细胞类:getCellClass，useExternalFiltering: 真}, {displayName: '研究名称',字段:'study.name',筛选: {选择选项:$scope.study，类型:uiGridConstants.filter.SELECT},细胞类:getCellClass，useExternalFiltering: 真}, {displayName: '优先级',字段:'priority.name'，筛选: {选择选项:$scope.priority，类型:uiGridConstants.filter.SELECT},细胞类:getCellClass，useExternalFiltering: 真}, {displayName: '严重性',字段:'severity.name',筛选: {选择选项:$scope.severity，类型:uiGridConstants.filter.SELECT},细胞类:getCellClass，useExternalFiltering: 真}, {displayName: '状态',字段:'status.name'，筛选: {选择选项:$scope.status，类型:uiGridConstants.filter.SELECT},细胞类:getCellClass，useExternalFiltering: 真}, {displayName: '创建',字段:'occuredDate'，宽度: '12%',filterHeaderTemplate: '<div class="row ui-grid-filter-container">'+'<div ng-repeat="col.filters 中的 colFilter" class="col-md-6 col-sm-6 col-xs-6">'+'
',过滤器: [{name: '来自',条件:uiGridConstants.filter.GREATER_THAN_OR_EQUAL},{name: '到',条件:uiGridConstants.filter.LESS_THAN_OR_EQUAL}],cellFilter: 'date:"dd MMMM yyyy, h:mm:ss a"',细胞类:getCellClass，使用外部过滤:假}, {显示名称:'修改'，字段:'createdDate'，宽度: '12%',filterHeaderTemplate: '<div class="row ui-grid-filter-container">'+'<div ng-repeat="col.filters 中的 colFilter" class="col-md-6 col-sm-6 col-xs-6">'+'
',过滤器: [{name: '来自',条件:uiGridConstants.filter.GREATER_THAN_OR_EQUAL},{name: '到',条件:uiGridConstants.filter.LESS_THAN_OR_EQUAL}],cellFilter: 'date:"dd MMMM yyyy, h:mm:ss a"',细胞类:getCellClass，使用外部过滤:假}];
注册API
$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;获取数据()；});gridApi.core.on.filterChanged( $scope, function() {var grid = this.grid;//定义取消过滤的行为$scope.isfilterclear = true;angular.forEach(grid.columns, function( col ) {if(col.filters[0].term){$scope.isfilterclear = false;}});如果($scope.isfilterclear){$超时(功能(){$rootScope.refresh()},500);}//过滤行为$scope.textFilter = grid.columns[1].filters[0].term;如果($scope.textFilter){$scope.$watch('textFilter', function (newVal, oldVal) {filterOptions.filterParam = 'title==*' + newVal + "*";}， 真的);获取数据()}$scope.desFilter = grid.columns[2].filters[0].term;如果($scope.desFilter){$scope.$watch('desFilter', function (newVal, oldVal) {filterOptions.filterParam = 'description==*' + newVal + "*";}， 真的);获取数据()}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 ) {获取数据()}}对于(var 螺柱 = 0；螺柱 <$scope.study.length；螺柱 ++){var study = $scope.study[stud].name;var studyId = $scope.study[stud].id;filterOptions.filterParam = 'studyId==' + studyId;if( grid.columns[4].filters[0].term === 学习 ) {获取数据()}}for (var pr = 0; pr < $scope.priority.length; pr ++){var 优先级 = $scope.priority[pr].name;var priorityId = $scope.priority[pr].id;filterOptions.filterParam = 'priorityId==' + priorityId;if( grid.columns[5].filters[0].term === 优先级) {获取数据()}}for (var sev = 0; sev < $scope.severity.length; sev ++){var 严重性 = $scope.severity[sev].name;varseverityId = $scope.severity[sev].id;filterOptions.filterParam = 'severityId==' + SeverityId;if( grid.columns[6].filters[0].term === 严重性 ) {获取数据()}}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() 在哪里
var getData = function () {eventService.getEventsWithParams(sortOptions.orderBy，sortOptions.directions，paginationOptions.pageSize,paginationOptions.pageNbr，filterOptions.filterBy,filterOptions.filterParam).then(函数(数据){$scope.gridOptions.data = 数据；//***angular.forEach($scope.gridOptions.data, 函数 (val) {val.occuredDate = 新日期(val.occuredDate);});//$interval 等待网格消化我们刚刚给它的数据$间隔(函数(){$scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);}, 0, 1);});};
我的 plunker(遗憾的是我无法提供真正的 API，但希望它无论如何都会有所帮助)
解决方案
工作代码为
gridApi.core.on.filterChanged( $scope, function() {//声明变量var grid = this.grid;var 列 = 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;//创建可选过滤器的请求var 查询 = [];无功字符串；函数请求(id，参数){if(param === "title==" || param === "描述=="){query.push(param + "*" + id + "*")} 别的 {query.push(param + id);}if (query.length <= 1){返回查询} 别的 {string = query.join(";");返回字符串；}}//定义取消过滤的行为$scope.isfilterclear = true;angular.forEach(列，函数(col){if(col.filters[0].term){$scope.isfilterclear = false;}});如果($scope.isfilterclear){$超时(功能(){$rootScope.refresh()},500);}//列的过滤行为如果($scope.columnTitle){$scope.$watch('columnTitle', function (newVal, oldVal) {filterOptions.filterParam = request(newVal, 'title==*');}， 真的);获取数据()}如果($scope.columnDesc){$scope.$watch('columnDesc', function (newVal, oldVal) {filterOptions.filterParam = request(newVal, 'description ==');}， 真的);获取数据()}如果(列类型){filterOptions.filterParam = request(columnType, 'eventTypeId==');获取数据()；}如果(列研究){filterOptions.filterParam = request(columnStudy, 'studyId==');获取数据()；}如果(列优先级){filterOptions.filterParam = request(columnPriority, 'priorityId==');获取数据()；}如果(列严重性){filterOptions.filterParam = request(columnSeverity, 'severityId==');获取数据()；}如果(列状态){filterOptions.filterParam = request(columnStatus, 'statusId==');获取数据()；}如果(列创建日期){filterOptions.filterParam = request($rootScope.setFilterDate, 'occuredDate>=');获取数据()}如果(列修改日期){filterOptions.filterParam = request($rootScope.setFilterDate, 'occuredDate>=');获取数据()}});
如您所见，我声明了带有两个参数的自定义函数，我在其中为每次调用提供了我的请求参数，我不确定这种方式是否优雅，但两周来我没有找到更好的解决方案
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-grid 中捕获应用的列过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
