javascript - Ag-grid:修改过滤器窗口而不覆盖过滤器逻辑

Question

我的客户希望一些功能(隐藏/显示某些列)出现在表中每一列的过滤窗口中(不仅仅是那些实际上可以隐藏或显示的功能)。

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

谢谢

Answer 1

首先，您可能想查看 Enterprise features 。它提供Column Menu它有另一个选项卡，用于显示/隐藏列，如您所愿，无需您付出额外的努力。

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

好消息是，这里有一个供您使用的模板，由 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演示它如何在网格的完整上下文中工作