如何筛选Ag-Grid中的选项？

Question

将Ag-Grid与AngularJS一起使用，目标是过滤具有已定义选项的列。例如，我有一个列状态，可能的值为valid和invalid。此列使用显示图标的单元格模板：valid的复选标记和invalid的叉号。使用单元格模板，过滤器标题似乎不会为此列提供数据中的值作为选项。

使用Ui-Grid，我们可以使用templateFields: ['valid', 'invalid']在列定义中使用选项，但是使用Ag-Grid似乎不存在等价物。

另一种选择是使用自定义过滤器，但问题是将它们与服务器端过滤一起使用。不幸的是，它似乎不可能通过设计。在Ag-Grid库中，在execute()的{​​{1}}函数内，我们可以看到：

FilterStage

这是要实现的目标，其中过滤器中提供了if (this.gridOptionsWrapper.isEnableServerSideFilter()) { filterActive = false; } 输入，并且所选选项会过滤数据：

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