[{"id":"924e5c0c-0717-4fae-9bbc-0b496941985e","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"22646924-f1ae-4a94-ac8e-e3e8ea2931f2","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"827318c4-10fd-462b-aa96-fab2cff174a9","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"8f626f70-8570-4934-a0e5-fc0ca6584738","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"1029bbcc-399c-42e6-b412-a0437395d2d5","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7e6097ce-e53b-416c-89c8-a3708db50528","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"3d1b1e48-357c-4999-985c-d9422356690a","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"e6cb5248-c20b-4d3e-adaf-b5c547e29548","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"58695f0f-7cb8-4bad-b617-dda90b01f606","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"081f453a-0e9a-4f06-a70b-18085a1f0d81","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"2c1d8bf8-2b69-4b16-bac9-9c46901abb6a","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"a042f416-d318-415c-b294-ed88a5010572","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7a454c88-860a-4e28-b52c-b18bae07dfe8","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"63b1ec03-c852-40ec-860e-f025c5791091","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"6b7d135b-71b4-4af7-828c-b28bf70b8ec7","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"5937193e-fd56-4296-8e32-ba41dba8e564","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"8ed468db-93ce-4cb3-8e2b-3249d9d464a7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"4169f34f-3e9b-45c1-91bf-41c02c3ad5a4","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"411aa66d-8df8-4466-896a-d8de68cf7066","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7fc8dcfc-27ff-4496-96c2-d92dfe1fb4b2","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"02afd225-87f7-4f6d-8be1-0a303c8beade","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"8040235f-6c53-447e-a7f0-4fe5911e066b","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"0610b0d6-03c7-461b-9dd4-f8d1b1787e7c","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7919ac2f-121b-447c-82ed-15d13b45df0b","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"1d01b943-eac8-480b-8d85-19bd093c8b3d","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"1f4d1309-e22c-413f-848d-2c0ca8450b0e","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"66d78fb1-e833-4bbf-ac7c-6bdfce9a80b0","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"ed5ad6f1-f5a2-47b8-a915-b185e8471ca3","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"6e9decb7-47f3-4871-81b9-65504bc293f1","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"836dcc3b-2afe-4351-bf9f-bd9e2b0c8510","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"80633614-e86b-4b0b-9129-9f7acab69f6d","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"1aaae15a-3496-43eb-a681-b077034832e4","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"70ce0595-eb94-4eb3-84f6-3a89ab8a4409","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"f3e379ff-ca52-44d8-a15e-966f89904220","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"c1228456-1b5c-429d-b231-25c10a2b41cc","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"58e7444a-12e4-4161-81db-0bb54d09eca9","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"f70c6c85-addd-43e7-8e2b-69dfe4a0a2fd","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"de70365b-d7c6-4355-a59b-3e77a6a374ae","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]}]
        
(Showing Draft Content)

行のフィルタリング

SpreadJSでは、セルのデータ型に応じた条件付きフィルター(数値フィルター、テキストフィルター、日付フィルター、カラーフィルター、カスタムオート)を適用することができます。ワークシートでフィルター操作が行われると、フィルター条件に合致する行が表示され、それ以外の行は非表示になります。

フィルタリングが可能な列には、列ヘッダー内にフィルタリングボタンが表示されます。ユーザーはこのボタンをクリックし、フィルターダイアログで利用可能なオプションを使用することができます。

filter-dialog-basic

フィルターダイアログは、アイテムでフィルタリングしたり、アイテムのリストを並べ替えたり、フィルタリングされた行を非表示にしたり、列に適用されたフィルタ条件をクリアしたりするのに役立ちます。フィルターリストに表示される各アイテムの文字列が、フィルターダイアログに収まらないほど長すぎる場合、ダイアログをリサイズして調整することができます。

rowFilterHideRowFilterクラスを使用すると、コード内でフィルタを作成することができます。次のコード例は、ワークシートにフィルターダイアログを追加し、範囲にフィルタを適用する方法を示しています。

// ワークブックとワークシートを構成します。
var spread = new GC.Spread.Sheets.Workbook("ss");
var activeSheet = spread.getActiveSheet();    

activeSheet.setValue(0, 0, "北");
activeSheet.setValue(1, 0, "南");
activeSheet.setValue(2, 0, "東");
activeSheet.setValue(3, 0, "南");
activeSheet.setValue(4, 0, "北");
activeSheet.setValue(5, 0, "北");
activeSheet.setValue(6, 0, "西");
activeSheet.setColumnWidth(0, 80);
           
// 行フィルタを設定します。
activeSheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(0, 0, 7, 1)));

// 列1を「北」でフィルタします。
var rowFilter = spread.getActiveSheet().rowFilter();
var condition = new GC.Spread.Sheets.ConditionalFormatting.Condition(
    GC.Spread.Sheets.ConditionalFormatting.ConditionType.textCondition, {
        compareType: GC.Spread.Sheets.ConditionalFormatting.TextCompareType.equalsTo,
        expected: "北"
});
rowFilter.addFilterItem(0, condition);
rowFilter.filter(0);

ユーザーは、マウスやさまざまなキーボードキーを使って、フィルターダイアログを操作することができます。Escキーは、ダイアログをキャンセルするのに使用します。Tabキーは異なるセクションに移動するのに使用し、上下の矢印キーは項目のリスト内で移動するのに使用することができます。スペースバーでチェック状態を変更することができます。

フィルターダイアログのカスタマイズ

filterDialogVisibleInfo メソッドを使用して、フィルターダイアログに表示される情報を制御できます。このメソッドは、行フィルターの表示情報を取得または設定するのに役立ちます。 


次のコードは、フィルターダイアログの「値で並べ替え」とリストフィルター領域を非表示にする方法です。

// ワークブックとワークシートを構成します。
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();

// 行フィルタを設定します。
sheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(1, 1, 10, 3)));
            
// フィルタオプションを非表示にします。
var filter = sheet.rowFilter();
filter.filterDialogVisibleInfo({
    sortByValue: false,
    sortByColor: true,
    filterByColor: true,
    filterByValue: true,
    listFilterArea: false
})

フィルターダイアログリストボックス

フィルターダイアログリストボックスは、階層ツリー表示をサポートしています。数値、テキスト、日付タイプのいずれであっても、セルの最大数を占めるデータ型アイテムが表示されます。フィルタデータにさまざまな種類の値の種類が含まれている場合、Excelの場合と同様に、フィルタ項目は特定の順序(日付、数値、テキスト、論理、空白)に従います。

フィルタ範囲にアウトライン列が含まれている場合、階層はフィルターダイアログリストボックスのアウトライン列データと同じになり、フィルタ項目のチェックボックスは、チェック、チェック解除、および不確定の方法でツリーのステータスをサポートします(子のステータスは同じではありません)。詳しくはアウトライン列を参照してください。


日付ツリー表示では、以下で説明するように、階層が異なればフォーマット方針も異なります。

  1. 日付ツリーの表示形式は、最初の日付タイプのセル形式に基づいています。ユーザーがフォーマットを設定しない場合は、自動日付フォーマットが適用されます。

  2. カルチャがENであり、日付フォーマット文字列にロケールIDが含まれていない場合、日付ツリービューの形式は次のように表示されます。年パターン:YYYY、月パターン:MM、日パターン:DD

日付タイプ値フィルターは、次のシナリオで詳しく説明されているように、データセットに従って表示されます

シナリオ

フィルタ範囲のすべての値が異なる年にある場合、どのレベルも展開されません。


フィルタ範囲のすべての値が同じ年にある場合、年レベルが展開されます。


フィルタ範囲のすべての値が同じ年と同じ月にある場合、年レベルと月レベルが展開されます。


色でフィルタリング

次の2つのモードに基づいて、フィルター列にカラーフィルターを適用することもできます。

  • フォントの色でフィルタリング-選択したフォントの色でセルを表示します。

  • セルの背景色でフィルタリング-選択した背景色でセルを表示します。

カラーフィルターメニューは、フィルターの対象となる範囲のセルの背景色や文字色が2種類以上ある場合に有効になります。


またフィルター操作についても参照してください。