Ag-grid：修改过滤器 window 而不覆盖过滤器逻辑

Question

我的客户希望某些功能（hide/show 某些列）位于 table 中每一列的过滤器 window 中（不仅是那些实际上可以隐藏或显示）。

我知道我可以定义自定义过滤器，但我不需要修改过滤器逻辑，我只需要在它的 window 中添加一些按钮（以及相关操作）。是否可以在不重新定义整个逻辑的情况下做到这一点？

谢谢

Answer 1

首先，您可能想查看 Enterprise features. It offers the Column Menu，它有另一个用于 showing/hiding 列的选项卡，因为您不需要额外的努力。

话虽如此，使用您提到的自定义过滤器选项的免费版本可以实现您想要完成的操作，但需要重新定义逻辑。

好消息是，这里有一个模板供您使用，由 ag-grid 他们自己提供并由我稍作修改：

function PersonFilter() {
}

PersonFilter.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
PersonFilter.prototype.setupGui = function (params) {
    this.gui = document.createElement('div');
    this.gui.innerHTML =
        '<div style="padding: 4px; width: 200px;">' +
        '<div style="font-weight: bold;">Custom Athlete Filter</div>' +
        '<div><input style="margin: 4px 0px 4px 0px;" type="text" id="filterText" placeholder="Full name search..."/></div>' +
        '<button onClick="toggleAge()">toggle age column</button>' +
        '</div>';

    this.eFilterText = this.gui.querySelector('#filterText');
    this.eFilterText.addEventListener("changed", listener);
    this.eFilterText.addEventListener("paste", listener);
    this.eFilterText.addEventListener("input", listener);
    // IE doesn't fire changed for special keys (eg delete, backspace), so need to
    // listen for this further ones
    this.eFilterText.addEventListener("keydown", listener);
    this.eFilterText.addEventListener("keyup", listener);

    var that = this;
    function listener(event) {
        that.filterText = event.target.value;
        params.filterChangedCallback();
    }
};

PersonFilter.prototype.getGui = function () {
    return this.gui;
};

PersonFilter.prototype.doesFilterPass = function (params) {
    // make sure each word passes separately, ie search for firstname, lastname
    var passed = true;
    var valueGetter = this.valueGetter;
    var filterWord = this.filterText
    var value = valueGetter(params);
    if (value.toString().toLowerCase().indexOf(filterWord)<0) {
      passed = false;
    }

    return passed;
};

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

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

PersonFilter.prototype.setModel = function(model) {
    this.eFilterText.value = model.value;
};

这里 JSFiddle 展示了它如何在网格的完整上下文中工作

Ag-grid：修改过滤器 window 而不覆盖过滤器逻辑

Ag-grid: modify filter window without overwriting filter logic

javascript

ag-grid