Как выполнить фильтрацию с выбором в Ag-Grid?

Используя Ag-Grid с AngularJS, цель состоит в том, чтобы отфильтровать столбец с определенным выбором. Например, у меня есть столбец Статус с возможными значениями valid и invalid. В этом столбце используется шаблон ячейки, в котором отображаются значки: галочка для valid и крестик для invalid. При использовании шаблона ячейки заголовок фильтра не предлагает значений, найденных в данных, для этого столбца в качестве параметров.

С Ui-Grid у нас была возможность использовать выбор внутри определения столбца с templateFields: ['valid', 'invalid'], но с Ag-Grid, похоже, не существует эквивалента.

Другой альтернативой было использование настраиваемого фильтра, но проблема заключается в использовании его с фильтрацией на стороне сервера. К сожалению, кажется, что это невозможно по замыслу. В библиотеке Ag-Grid в execute() функции FilterStage мы можем видеть:

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

Это цель, которую нужно достичь, когда в фильтре доступен вход <select>, а данные фильтруются по выбранному параметру:

Цель


angularjs ag-grid
person sgy    schedule 27.05.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

У меня было такое же требование, я написал собственный код, это может помочь -

добавьте filter: 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);
                            }
                        }
person Basavaraj    schedule 16.12.2016