Javascript Ag网格：修改过滤器窗口而不覆盖过滤器逻辑

我的客户希望某些函数（隐藏/显示某些列）位于表中每个列的筛选窗口中（而不仅仅是那些实际上可以隐藏或显示的函数）

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

---

谢谢你

首先，你可能想了解一下。它提供了另一个选项卡，可以按照您的需要显示/隐藏列，而无需付出额外的努力

话虽如此，您想要做的是使用您提到的自定义过滤器选项的免费版本，但必须重新定义逻辑

好消息是，这里有一个模板供您使用，由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;
};

函数PersonFilter（）{
}
PersonFilter.prototype.init=函数（参数）{
this.valueGetter=params.valueGetter；
this.filterText=null；
这个.setupGui（params）；
};
//ag Grid没有调用，只是为了帮助我们进行设置
PersonFilter.prototype.setupGui=函数（参数）{
this.gui=document.createElement（'div'）；
this.gui.innerHTML=
'' +
“自定义运动员过滤器”+
'' +
“切换年龄列”+
'';
this.eFilterText=this.gui.querySelector（“#filterText”）；
this.eFilterText.addEventListener（“已更改”，侦听器）；
这个.eFilterText.addEventListener（“粘贴”，listener）；
this.eFilterText.addEventListener（“输入”，侦听器）；
//IE不会为特殊键（如删除、退格）触发更改，因此需要
//再听听这个
this.eFilterText.addEventListener（“keydown”，listener）；
this.eFilterText.addEventListener（“keyup”，listener）；
var=这个；
函数侦听器（事件）{
that.filterText=event.target.value；
params.filterChangedCallback（）；
}
};
PersonFilter.prototype.getGui=函数（）{
返回这个.gui；
};
PersonFilter.prototype.doesFilterPass=函数（参数）{
//确保每个单词都单独传递（搜索firstname、lastname）
var通过=真；
var valueGetter=this.valueGetter；
var filterWord=this.filterText
var值=valueGetter（参数）；
如果（value.toString（）.toLowerCase（）.indexOf（filterWord）首先，您可能需要查看。它提供了一个选项卡，该选项卡具有另一个选项卡，可以按照您的需要显示/隐藏列，而无需付出额外的努力

话虽如此，您想要做的是使用您提到的自定义过滤器选项的免费版本，但必须重新定义逻辑

好消息是，这里有一个模板供您使用，由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;
};

函数PersonFilter（）{
}
PersonFilter.prototype.init=函数（参数）{
this.valueGetter=params.valueGetter；
this.filterText=null；
这个.setupGui（params）；
};
//ag Grid没有调用，只是为了帮助我们进行设置
PersonFilter.prototype.setupGui=函数（参数）{
this.gui=document.createElement（'div'）；
this.gui.innerHTML=
'' +
“自定义运动员过滤器”+
'' +
“切换年龄列”+
'';
this.eFilterText=this.gui.querySelector（“#filterText”）；
this.eFilterText.addEventListener（“已更改”，侦听器）；
这个.eFilterText.addEventListener（“粘贴”，listener）；
this.eFilterText.addEventListener（“输入”，侦听器）；
//IE不会为特殊键（如删除、退格）触发更改，因此需要
//再听听这个
this.eFilterText.addEventListener（“keydown”，listener）；
this.eFilterText.addEventListener（“keyup”，listener）；
var=这个；
函数侦听器（事件）{
that.filterText=event.target.value；
params.filterChangedCallback（）；
}
};
PersonFilter.prototype.getGui=函数（）{
返回这个.gui；
};
PersonFilter.prototype.doesFilterPass=函数（参数）{
//确保每个单词都单独传递（搜索firstname、lastname）
var通过=真；
var valueGetter=this.valueGetter；
var filterWord=this.filterText
var值=valueGetter（参数）；
if（value.toString（）.toLowerCase（）.indexOf（filterWord）为什么是否定的？我只是想知道是否可以做到以及如何做到。如果你是企业客户，你当然可以在这里继续提问，但你可能会在ag grid论坛上得到更快的回答：ag-grid.com/forumWhy negatives？我只是想知道是否可以做到以及如何做到。如果你是企业客户，你当然可以继续提问o在此处提问，但您可能会在ag grid论坛上得到更快的回复：ag-grid.com/forumGreat solution。我最终创建了一个自定义主面板，因为我使用的是企业版。好答案-Jarod，如果您感兴趣，可以脱机联系。我的电子邮件是sean。landsman@ag-grid.com很好的解决方案，我最终成功了如果你感兴趣的话，在我使用企业版Good Response-Jarod的时候，吃一个定制的主面板可能会更好。我的电子邮件是sean。landsman@ag-grid.com