Wie angewendeter Spaltenfilter in angularem UI-Grid zu fangen

Question

Ich arbeite mit UI-Grid-und Server-Filterung. Für jede Spalte sende ich eine Anfrage an die API mit Param basierend auf dem Filterwert. Standardmäßig param ist leer

 var filterOptions = { 
       filterBy: '&$filter=', 
       filterParam: "" 
      }; 

    // and api call looks like 

?$orderby=id-&pageSize=250&pageNbr=1&$filter= 

wenn ich ein Setup jeden Filter ich nächste Anfrage So

param:  filterOptions.filterParam = 'eventTypeId==' + evtTypeId 

request: ?$orderby=id-&pageSize=250&pageNbr=1&$filter=eventTypeId==2 

senden, was ich will recht einfache Idee ist, mag ich, wenn die Filter überprüfen bereits angewandt wird und eine Anfrage senden wie

?$orderby=id-&pageSize=250&pageNbr=1&$filter=eventTypeId==2,studyId==1 

aber leider kann ich keine angewandten Filter fangen. Ich schätze es, wenn jemand mit meinem Problem helfen könnte.

Mein Code unten

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() 
         } 
        } 
       }); 

Wo getData() ist

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 (leider kann ich nicht die reale API zur Verfügung stellen, aber hoffen, dass es irgendwie helfen)

Answer 1

Der Arbeitscode

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() 
       } 
      }); 

ist Wie Sie sehen können, habe ich erklärt, benutzerdefinierte Funktion mit zwei params, wo ich meine Anfrage param Bereitstellung Für jeden Anruf bin ich nicht sicher über die Eleganz dieser Art, aber für zwei Wochen habe ich keine bessere Lösung gefunden