如何筛选Ag-Grid中的选择？ [英] How to filter with choices in Ag-Grid?
问题描述
使用带有AngularJS的Ag-Grid，目标是过滤具有定义选项的列。例如，我有一个状态列，其可能值为有效和无效。此列使用显示图标的单元格模板：有效的复选标记和无效的叉号。使用单元格模板，过滤器标题似乎没有提供在此列中的数据中找到的值作为选项。
Using the Ag-Grid with AngularJS, the objective is to filter a column with defined choices. For example, I have a column Status with possible values of valid and invalid. This column uses a cell template that displays icons: a checkmark for valid and a cross for invalid. Using a cell template, the filter heading does not seems to offer the values found in data, for this column, as options.
使用Ui-Grid，我们可以在列定义中使用 templateFields：['valid'，'invalid'] ，但在Ag-Grid中似乎不存在任何选择。
With Ui-Grid we had the possibility to use choices inside column definition with templateFields: ['valid', 'invalid'], but with Ag-Grid no equivalent seems to exist.
另一种选择是使用自定义过滤器，但是问题是将它们与服务器端过滤一起使用。不幸的是，似乎无法通过设计实现。在Ag-Grid库中，在 FilterStage 的 execute（）函数中，我们可以看到：
Another alternative was to use a custom filter, but the problem is to use them with server-side filtering. Unfortunately, it seems that it's not possible by design. In Ag-Grid library, within execute() function of FilterStage, we can see:
if (this.gridOptionsWrapper.isEnableServerSideFilter()) {
filterActive = false;
}
这是要实现的目标，其中< select> 输入在过滤器中可用，并且数据通过所选选项过滤：
This is the kind of goal to achieve, where a <select> input is available in filter and data is filtered by the selected option:
推荐答案
我有相同的要求，我写了一些自定义代码可能会帮助-
I had same requirement, i wrote some custom code it may help--
在列属性中添加过滤器：LetterFilter 。
下面的代码在过滤器中显示成功和失败。
below code display Successful and Unsuccessful in 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);
}
}
这篇关于如何筛选Ag-Grid中的选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
