1
私はuiグリッドとサーバー側のフィルタリングを使用しています。各列に対して、私はフィルタ値に基づいてparamでAPIにリクエストを送信します。私のセットアップは、私は次の要求を送信するすべてのフィルタ角度uiグリッドで適用された列フィルタをキャッチする方法
param: filterOptions.filterParam = 'eventTypeId==' + evtTypeId
request: ?$orderby=id-&pageSize=250&pageNbr=1&$filter=eventTypeId==2
それでは、私がしたいことは、非常に単純なアイデアである私は、フィルタがすでに適用されているかどうかを確認したいとのリクエストを送信する場合、デフォルトのparamによって
var filterOptions = {
filterBy: '&$filter=',
filterParam: ""
};
// and api call looks like
?$orderby=id-&pageSize=250&pageNbr=1&$filter=
空でありますlike
?$orderby=id-&pageSize=250&pageNbr=1&$filter=eventTypeId==2,studyId==1
しかし、申し訳ありませんが、適用されたフィルタを検出できません。誰かが私の問題を助けることができたらと感謝します。
columnDefの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);
});
};
my plunker（ある
$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()
}
}
});
以下マイコード残念ながら私は、作業コードを実際のAPIを提供し、それはとにかく役立つことを願っています）