以角度2

Question

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

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和amp设置预定义的日期值？ quarter4 when use在下拉过滤器中选择该选项。我已经浏览了ag-grid过滤器部分，我没有找到任何选项来定制它。

感谢任何帮助。

Answer 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

Answer 2

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