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演示如何在网格的完整上下文中工作

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

1 个答案: