angular2中日期过滤器的ag-grid自定义过滤器选项答案

【问题标题】：ag-grid custom filter options for date filter in angular2angular2中日期过滤器的ag-grid自定义过滤器选项
【发布时间】：2017-10-17 23:00:50
【问题描述】：

目前我正在使用以下方式将新选项分配给分配的日期列字段。但它没有显示在网格中。

let dateValues = ["equals", "inRange","quarter1","quarter2","quarter3","quarter4"];

{
    headerName: "Assigned Date",
    field: "assignedDate",              
    filter: "date",
    filterParams: {apply: true, newRowsAction: 'keep'},
    sort: 'desc',
    filterOptions: this.dateValues
 }

并寻找一些指针，当使用在下拉过滤器中选择该选项时，我如何为 quater1、quater2、quater3 和 Quarter4 设置预定义的日期值。我已经浏览了 ag-grid 过滤器部分，我没有找到任何自定义选项。

感谢任何帮助。

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

这肯定不是你所做的那样。而是像这样使用它：

{
    headerName: "Assigned Date",
    field: "assignedDate",              
    filter: "date",
    filterParams: {apply: true, newRowsAction: 'keep'},
    sort: 'desc',
    filter: DropDownFilter
 }

function DropDownFilter() {
}

DropDownFilter.prototype.init = function (params) {
    this.valueGetter = params.valueGetter;
    this.filterText = null;
    this.setupGui(params);
};

// not called by ag-Grid, just for us to help setup
DropDownFilter.prototype.setupGui = function (params) {
    this.gui = document.createElement('div');
    this.gui.innerHTML =
        '<select><option value="equals">equals</option><option value="inRange">inRange</option></select>';

    this.eFilterText = this.gui.querySelector('#filterText');
    this.eFilterText.addEventListener("changed", listener); 
    var that = this;
    function listener(event) {
        that.filterText = event.target.value;
        params.filterChangedCallback();
    }
};

DropDownFilter.prototype.getGui = function () {
    return this.gui;
};
DropDownFilter.prototype.isFilterActive = function () {
    return this.filterText !== null && this.filterText !== undefined && this.filterText !== '';
};

DropDownFilter.prototype.getModel = function() {
    var model = {value: this.filterText.value};
    return model;
};

DropDownFilter.prototype.doesFilterPass = function (params) {
    return params.data.value === this.filterText.value;
}
DropDownFilter.prototype.setModel = function(model) {
    this.eFilterText.value = model.value;
};

参考：agGrid Filter

【讨论】：

【解决方案2】：

您需要编写一个自定义过滤器组件，在下拉列表中显示您的选项。内置日期过滤器可以显示您在列定义中提供的“filterOptions”，但不会执行您期望的搜索（如果日期在特定季度）。请参阅 ag-grid 网站上的 custom Angular filter 示例。

【讨论】：