如何過濾Ag-Grid中的選項？

Question

使用Ag-Grid和AngularJS，目標是過濾一個具有定義選項的列。例如，我有一個列狀態，可能的值爲valid和invalid。此列使用顯示圖標的單元格模板：valid的複選標記和invalid的交叉。使用單元格模板時，過濾器標題似乎並未提供數據中找到的值（對於此列）作爲選項。

使用Ui-Grid，我們可以使用列定義中的選項templateFields: ['valid', 'invalid']，但對於Ag-Grid，似乎沒有等價物存在。

另一種選擇是使用自定義過濾器，但問題是使用它們進行服務器端過濾。不幸的是，這似乎是不可能的設計。在銀網庫的FilterStage​​函數中，我們可以看到：

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

這是什麼樣的目標來實現，其中<select>輸入可用過濾器和數據由所選的選項過濾：

Answer 1

我同樣的要求，我寫了一些自定義代碼可以幫助 -

添加過濾器：LetterFilter列屬性。

下面的代碼顯示過濾器中的成功和不成功。

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