[]
FlexGridFilter クラスの新しいインスタンスを初期化します。
フィルタリングするFlexGrid。
FlexGridFilter の初期化オプション。
アクティブなColumnFilterEditor を取得します。
このプロパティを使用すると、filterChanging イベントを処理するときに フィルターエディターをカスタマイズできます。 フィルターが編集されていない場合はnullを返します。
使用するデフォルトフィルタタイプを取得または設定します。
この値は特定の列のフィルタでオーバーライドできます。 たとえば、以下のサンプルコードは、 "ByValue"列を除くすべての列に対して条件に基づくフィルタを作成します。
import { FlexGridFilter, FilterType } from '@mescius/wijmo.grid.filter';
let filter = new FlexGridFilter(flex);
filter.defaultFilterType = FilterType.Condition;
let col = flex.getColumn('ByValue'),
cf = filter.getColumnFilter(col);
cf.filterType = FilterType.Value;
このプロパティのデフォルト値は FilterType.Both です。
フィルターにValueFilter.filterText プロパティによって選択された値のみを含めるかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値はtrueです。この動作はExcelと同じです。 この動作を無効にするには、このプロパティをfalseに設定します。 その場合、リストに表示される項目のみが検索され、 フィルタに含まれる項目が検索されません。
フィルタを持つ列の名前またはバインディングを含む配列を取得または設定します。
このプロパティをnullまたは空の配列に設定すると、 すべての列にフィルタが追加されます。 以下のサンプルコードは、「country」「downloads」「sales」列にフィルタを適用する例です。
var filter = new wijmo.grid.filter.FlexGridFilter(FlexGrid);
// 配列に設定した列のみフィルタが有効になります
filter.filterColumns = ['country', 'downloads', 'sales'];
```
現在のフィルタ定義をJSON文字列として取得または設定します。
filterDefinition には、現在アクティブな列フィルターに関する情報が含まれます。 データマップはシリアル化できないため、dataMap プロパティは含まれていません。
このフィルタを所有するFlexGrid への参照を取得します。
更新された行にフィルタを適用するかどうかを示す値を取得または設定します。
このプロパティが true に設定されている場合、行の更新、行の挿入、並べ替えなどの動作によってフィルタが更新され、フィルタを通過しない行は絞り込まれます。 このプロパティが false に設定されている場合、フィルタはすぐには適用されないため、フィルタを更新するには適用ボタンを再度クリックする必要があります。 Excel の完全な動作を実現するには、CollectionView のCollectionView.refreshOnEdit プロパティを false に設定する必要もあります。
// FlexGridの場合
flexgrid.collectionView.refreshOnEdit = false;
// FlexSheetの場合
flexSheet.itemsSourceChanged.addHandler((s, e) => {
if(s.collectionView){
s.collectionView.refreshOnEdit = false;
}
});
このプロパティのデフォルト値はfalseです。
FlexGridFilter がグリッドの列ヘッダにフィルタ編集ボタンを追加するかどうかを示す値を取得または設定します。
このプロパティをfalseに設定した場合は、ユーザーがフィルタを編集、クリア、 および適用する手段を開発者が提供する必要があります。
このプロパティのデフォルト値は true です。
フィルタエディタにソートボタンが表示されるかどうかを示す値を取得または設定します。
デフォルトでは、エディタにはExcelと同じようにソートボタンが表示されます。 しかし、ユーザーはヘッダをクリックすることによって列をソートできるので、 フィルタエディタにソートボタンがあるのは望ましくない場合があります。
このプロパティのデフォルト値は true です。
現在の列フィルタをグリッドに適用します。
すべての列フィルタをクリアします。
フィルタエディタを閉じます。
指定したグリッド列のフィルタエディタを表示します。
編集するフィルタを含むColumn 。
フィルタ表示をトリガしたセルの範囲を含む wijmo.grid.HitTestInfo オブジェクト。
エディタの配置を設定するために参照として使用するHTMLElement。
指定した列のフィルタを取得します。
フィルタの適用先のColumn (または列名またはインデックス)。指定された列が存在しない場合、メソッドはnullを返します。
存在しない場合にフィルタを作成するかどうか。
editingFilter イベントを発生させます。
イベントデータを含むCellRangeEventArgs 。
イベントがキャンセルされなかった場合はTrue。
exclusiveValueSearchChanged イベントを発生させます。
filterApplied イベントを発生させます。
filterChanged イベントを発生させます。
filterChanging イベントを発生させます。
イベントデータを含むCellRangeEventArgs 。
イベントがキャンセルされなかった場合はTrue。
ユーザーが列フィルタを編集しようとしたときに発生します。フィルタのデフォルトの設定をオーバーライドする場合は、 このイベントを使用して列フィルタをカスタマイズします。
このイベントは、フィルターエディターが作成される前に発生します。 この時点では、activeEditorプロパティはnullです。 エディタをカスタマイズする場合は、filterChangingイベントを使用してください。
たとえば、以下のコードでは、値フィルターエディターで国名のリストをカスタマイズします。この場合、「Italy」が常に最初の値になります。
new FlexGridFilter(theGrid, {
editingFilter: (s, e) => {
if (e.getColumn().binding == 'country') {
// Italyから始まります。
let vals = ["Italy"];
// Italyを除き、他の一意の値を追加します
let valueFilter = s.getColumnFilter("country", true).valueFilter;
valueFilter.uniqueValues = null;
valueFilter.getUniqueValues().forEach(item => {
if (item.text != "Italy") {
vals.push(item.text);
}
});
// カスタムの一意の値リストをvalueFilterに割り当てます
valueFilter.uniqueValues = vals;
valueFilter.sortValues = false;
}
}
});
exclusiveValueSearchが変更された後に発生します。
フィルタが適用された後に発生します。
ユーザーが列フィルタを編集した後で発生します。
イベントパラメータを使用して、フィルタを所有する列を判定し、 変更が適用されたかキャンセルされたかを判定します。
ユーザーが列フィルタを編集しようとしたときに発生します。
デフォルト設定を上書きする場合は、このイベントを使用してフィルターエディターをカスタマイズします。 現在アクティブなフィルターエディターへの参照を取得するには、activeEditorプロパティを使用します。
たとえば、以下のコードでは、値フィルターエディターで国名のリストをカスタマイズします。 この場合、「Italy」が常に最初の値になります。
new FlexGridFilter(theGrid, {
filterChanging: (s, e) => {
if (e.getColumn().binding == "country") {
let edt = s.activeEditor,
lbHost = edt.hostElement.querySelector('[wj-part=div-values]'),
lb = Control.getControl(lbHost) as ListBox;
(lb.collectionView as CollectionView).sortComparer = (a: any, b: any) => {
if (a != b) { // 最初にItalyを並べ替えます。
if (a == 'Italy') return -1;
if (b == 'Italy') return +1;
}
return null; // デフォルトの並べ替え順を使用します。
}
lb.collectionView.refresh();
}
},
});
FlexGrid コントロールのExcelスタイルのフィルタを実装します。
FlexGrid コントロールでフィルタリングを有効にするには、 FlexGridFilter のインスタンスを作成し、コンストラクターのパラメーターとして グリッドを渡します。例:
import { FlexGrid } from '@mescius/wijmo.grid'; import { FlexGridFilter } from '@mescius/wijmo.grid.filter'; let flex = new FlexGrid('#theGrid'); // グリッドを作成します let filter = new FlexGridFilter(flex); // グリッドにフィルタを追加します。
そうすると、グリッドの列ヘッダにフィルタアイコンが追加されます。 このアイコンをクリックするとエディタが表示され、そこでその列のフィルタ条件を編集できます。
FlexGridFilter クラスは wijmo.grid および wijmo.input モジュールに依存します。
次の例では、FlexGridFilter を使用してFlexGrid コントロールにフィルタ処理を追加する方法を示しています。
デモ