Wie mit Auswahlen in Ag-Grid filtern?

Question

Mit dem Ag-Grid mit AngularJS ist das Ziel, eine Spalte mit definierten Auswahlmöglichkeiten zu filtern. Zum Beispiel habe ich eine Spalte Status mit möglichen Werten von valid und invalid. Diese Spalte verwendet eine Zellenvorlage, die Symbole anzeigt: ein Häkchen für valid und ein Kreuz für invalid. Unter Verwendung einer Zellenvorlage scheint die Filterüberschrift die in Daten gefundenen Werte für diese Spalte nicht als Optionen anzubieten.

Mit Ui-Grid hatten wir die Möglichkeit, innerhalb der Spaltendefinition mit templateFields: ['valid', 'invalid'] zu wählen, aber mit Ag-Grid scheint kein Äquivalent zu existieren.

Eine andere Alternative war die Verwendung eines benutzerdefinierten Filters, aber das Problem besteht darin, sie mit serverseitiger Filterung zu verwenden. Leider scheint es nicht möglich zu sein. In Ag-Grid-Bibliothek, in execute() Funktion von FilterStage, können wir sehen:

if (this.gridOptionsWrapper.isEnableServerSideFilter()) { 
    filterActive = false; 
} 

Dies ist die Art von Ziel ist es zu erreichen, wo ein <select> Eingang in Filter und Daten verfügbar ist, wird durch die gewählte Option gefiltert:

Answer 1

ich gleiche Forderung hatte, schrieb ich einige Code benutzerdefinierte es help-- kann

Filter hinzufügen: LetterFilter in der Spalteneigenschaft.

unter Codeanzeige Erfolgreich und erfolglos im Filter.

$scope.Publishstatus = [{'checked':false,'data':'Successful'},{'checked':false,'data':'Unsuccessful'}]; 


      $scope.generateHtml = function(thisObj){ 
          angular.forEach($scope.Publishstatus, function(
            value) { 
           thisObj.valuesToShow.push(value); 
          }); 

          var HTMLStr = '<div>' 
            + '<div class="ag-filter-header-container"><label><input id="selectAll" type="checkbox" checked class="ag-filter-checkbox">(Select All)</label></div>' 
            + '<div class="ag-filter-list-viewport">' 
            + '<div class="ag-filter-list-container" style="height: 140px;">'; 

          var counter = 0; 
          angular 
            .forEach(
              thisObj.valuesToShow, 
              function(value) { 
               HTMLStr = HTMLStr 
                 + '<div class="ag-filter-item" style="top: ' 
                 + counter 
                 + 'px;"><label><input id="letterStatusId" type="checkbox" checked class="ag-filter-checkbox" filter-checkbox="' 
                 + value.checked 
                 + '"><span class="ag-filter-value">' 
                 + value.data 
                 + '</span></label></div>'; 
              }); 
          HTMLStr = HTMLStr + '</div>' + '</div>' 
            + '</div>'; 

          return HTMLStr; 

         } 

    function LetterFilter() {} 

     LetterFilter.prototype.init = function(params) { 
          this.valueGetter = params.valueGetter; 
          this.filterText = null; 
          this.valuesToFilter = []; 
          this.valuesToShow = []; 
          this.setupGui(params); 
         }; 
    LetterFilter.prototype.setupGui = function(params) { 
          var that = this; 
          this.gui = document.createElement('div'); 
          this.gui.innerHTML = $scope.generateHtml(this); 

          this.letterStatusCheckboxes = this.gui.querySelectorAll('#letterStatusId'); 

          $scope.singleCheckBocListener(this,params); 

          this.selectAllCheckbox = this.gui 
            .querySelector('#selectAll'); 
          this.selectAllCheckbox.addEventListener(
            'change', selectAllListener); 

          this.filterActive = false; 



          function selectAllListener(event) { 
           var checkedValue = $(event.target).is(':checked'); 
           if (checkedValue) { 
            // set all values checked in sort array 
            angular.forEach(that.valuesToShow, 
              function(value) { 
               value.checked = true; 
              }); 
            // set all values as checked in GUI 
            angular.forEach(that.letterStatusCheckboxes,function(value) { 
               $(value).prop('checked',true); 
              }); 
            that.filterActive = false; 
           } else { 
            // add all values checked in sort array 
            angular.forEach(that.valuesToShow,function(value) { 
               value.checked = false; 
              }); 
            // set all values as checked in GUI 
            angular.forEach(that.letterStatusCheckboxes,function(value) { 
               $(value).prop('checked',false); 
              }); 

            that.filterActive = true; 
           } 
           params.filterChangedCallback(); 
          } 
         }; 

     LetterFilter.prototype.getGui = function() { 
          return this.gui; 
         }; 


     LetterFilter.prototype.doesFilterPass = function(
           params) { 
          var valuesToFilter = this.valuesToShow; 
          var returnValue = false; 
          var valueGetter = this.valueGetter; 
          var value = valueGetter(params); 
          valuesToFilter.forEach(function(entry) { 
           if (entry.checked 
             && entry.data === "Successful" 
             && value === "") { 
            returnValue = true; 
           } 
           if (entry.checked 
             && entry.data === "Unsuccessful" 
             && value !== "") { 
            returnValue = true; 
           } 
          }); 
          return returnValue; 
         }; 

     LetterFilter.prototype.isFilterActive = function() { 
          return this.filterActive; 
         }; 


     $scope.singleCheckBocListener = function(thisObj,param){ 
             angular.forEach(thisObj.letterStatusCheckboxes, 
            function(value) { 
             value.addEventListener('change',checkBoxListener); 
            }); 

          function checkBoxListener(event) { 
           var checkedValue = $(event.target).is(':checked'); 
           var valueFromField = $(event.target).parent().text(); 
           $scope.valueFromField = $(event.target).parent().text(); 
           angular.forEach(thisObj.valuesToShow,function(value) { 
            if (value.data === valueFromField) { 
             value.checked = checkedValue; 
            } 
           }); 
           var isAllChecked = true; 
           var isAllNotChecked = true; 
           angular.forEach($scope.Publishstatus,function(value) { 
              if (!value.checked) { 
               isAllChecked = false; 
              } else { 
               isAllNotChecked = false; 
              } 
             }); 

       thisObj.filterActive = true;              $scope.isCheckedBox(isAllChecked,isAllNotChecked,thisObj) 
           param.filterChangedCallback(); 
          } 
         } 

      $scope.isCheckedBox = function(isAllChecked,isAllNotChecked,thisObj){ 
          if (isAllChecked) { 
           // all items are selected 
           $(thisObj.selectAllCheckbox).prop('checked', true); 
           $(thisObj.selectAllCheckbox).prop('indeterminate', false); 
           thisObj.filterActive = false; 
          } else if (isAllNotChecked) { 
           // all items are not selected 
           $(thisObj.selectAllCheckbox).prop('checked', false); 
           $(thisObj.selectAllCheckbox).prop('indeterminate', false); 
          } else { 
           // some items selected, other not 
           $(thisObj.selectAllCheckbox).prop('checked', false); 
           $(thisObj.selectAllCheckbox).prop('indeterminate', true); 
          } 
         }