SpreadJS製品ヘルプ
ソートとフィルター
機能 > テーブルシート > テーブルシート操作 > ソートとフィルター

テーブルシートでは、ビューの列でソートおよびフィルタリングすることができます。列ヘッダのフィルターボタン（下矢印アイコン▼）を使用して、フィルターダイアログを表示できます。

テーブルシートのフィルターダイアログの各部分を表示または非表示にするには、allowSort、allowFilterByValue、allowFilterByListなどのIColumnオプションを使用します。

次のサンプルコードは、特定のフィルターオプションを使用して各列にフィルターダイアログを設定する方法を示します。

JavaScript
コードのコピー 
// テーブルシートにビューを連結します。 
customerTable.fetch().then(function () {
    var view = customerTable.addView("myView", [
        { value: "customerKey", width: 150, caption: "Customer Key", allowSort: false, allowFilterByValue: false, allowFilterByList: false }, // 列ヘッダでフィルターボタンを無効にします。
        { value: "customer", width: 200, caption: "Customer", allowSort: false }, // フィルタドロップダウンからソートのみを非表示にします。 
        { value: "billToCustomer", width: 200, caption: "Bill To Customer", allowFilterByValue: false }, // allowFilterByValueのみを非表示にします。
        { value: "category", width: 120, caption: "Category", allowFilterByList: false }, // allowFilterByListのみを非表示にします。
        { value: "buyingGroup", width: 180, caption: "Buying Group" },
        { value: "primaryContact", width: 170, caption: "Primary Contact" },
        { value: "postalCode", width: 120, caption: "Postal Code" },
        { value: "validFrom", width: 150, caption: "Valid From" },
        { value: "validTo", width: 180, caption: "Valid To" }

    ]);
    // ビューには、テーブルのすべてのデフォルト列があります。 
    sheet.setDataView(view);
});

ソート

フィルターダイアログから昇順または降順のオプションを選択することで、フィールド内のデータをソートすることができます。

 

テーブルシートは、デフォルトで値が変更されると自動的に再ソートされます。この動作を無効にするには、テーブルシートビューを定義するときにautoSortプロパティをfalseに設定します。

JavaScript
コードのコピー 
// テーブルシートにビューを連結します。 
customerTable.fetch().then(function () {
    var view = customerTable.addView("myView", [
        { value: "customerKey", width: 120, caption: "Customer Key" },
        { value: "customer", width: 200, caption: "Customer" },
        { value: "billToCustomer", width: 200, caption: "Bill To Customer" },
        { value: "buyingGroup", width: 200, caption: "Buying Group" },
        { value: "primaryContact", width: 170, caption: "Primary Contact" },
        { value: "postalCode", width: 120, caption: "Postal Code" },
        { value: "validFrom", width: 190, caption: "Valid From" }

    ]);
    // 並べ替えられた列でセル値を編集した後の並べ替えを防ぐには、autoSortプロパティをfalseに設定します。
    view.autoSort = false;
    // ビューには、テーブルのすべてのデフォルト列があります。
    sheet.setDataView(view);
});

フィルター

フィールド内のデータをフィルター処理することで、テーブルシート内のデータを絞り込み、必要なデータを表示できます。

TableSheet Filter

テーブルシート内のデータをフィルター処理するには、次の2つの方法のいずれかを使用できます。

テーブルシートの値を変更すると、デフォルトでは自動的に再フィルター処理されません。ただし、テーブルシートのビューを定義するときにautoFilterプロパティを設定することでこの動作を有効にできます。

このプロパティは、新しい値または更新された値がフィルター処理された値と同じである場合はフィルター処理します。そうでない場合、新しい値はフィルター基準に関係なくフィルター処理されません。

JavaScript
コードのコピー 
// テーブルシートにビューを連結します。 
customerTable.fetch().then(function () {
    var view = customerTable.addView("myView", [
        { value: "customerKey", width: 120, caption: "Customer Key" },
        { value: "customer", width: 200, caption: "Customer" },
        { value: "billToCustomer", width: 200, caption: "Bill To Customer" },
        { value: "buyingGroup", width: 200, caption: "Buying Group" },
        { value: "primaryContact", width: 170, caption: "Primary Contact" },
        { value: "postalCode", width: 120, caption: "Postal Code" },
        { value: "validFrom", width: 190, caption: "Valid From" }

    ]);
    // autoFilterをtrueに設定して、フィルター処理された値と同じ新しい値または更新された値をフィルター処理します。 
    view.autoFilter = true;
    // ビューには、テーブルのすべてのデフォルト列が含まれます。 
    sheet.setDataView(view);
});
spread.resumePaint();

 

 

Copyright © 2016 GrapeCity inc. All rights reserved.