たAg-グリッド：フィルタロジックを上書きせずにフィルタウィンドウを変更するには、

Question

私のクライアントは、いくつかの機能を望んでいる（非表示/特定の列を表示）テーブル内のすべての列のフィルタウィンドウ（実際には非表示または表示することができない唯一のものであることを）。

私はカスタムフィルタを定義することができます知っているが、私はフィルタロジックを変更する必要はありませんが、私は（関連アクションで）そのウィンドウ内のいくつかのボタンを追加する必要があります。ロジック全体を再定義せずにそれを行うことは可能ですか？

あなたはEnterprise featuresに見てみたいことがあります

Answer 1

まず、ありがとうございました。それはColumn Menuを提供しています。このタブには、あなたの最後に余計な努力を払わずに、カラムを表示/非表示するための別のタブがあります。

が何を行って欲しいことは、あなたがロジックを再定義せずに言及はなく、カスタムフィルタオプションを使用して、無料版で可能である、と述べました。ここで

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-グリッド自身によって提供され、変更があるということです