項目スライサーの作成

項目スライサーを使用すると、データをフィルタリングできます。

GeneralSlicerDataおよびTableSlicerDataクラスは、フィルタリング対象のデータを保持し、フィルタ情報プロパティを提供します。ItemSlicerクラスは、スライサーデータに使用できます。項目スライサーはスライサーコンポーネントであり、シートからは独立しています。styleメソッドを使用すると、項目スライサーのスタイルを設定できます。

次の図は、項目スライサーを示します。

コードの使用

次のサンプルコードは、テーブルを作成し、項目スライサーを追加します。

JavaScript	コードのコピー
// テーブルを作成します。 var dataSource = [ { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" }, { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" }, { Name: "Alice", City: "Washington", Birthday: "2012/2/15" }, ]; var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource); var slicerData = table.getSlicerData(); // 項目スライサーを作成して、項目すライザーにデータを設定します。 var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name"); // DOMツリーに項目スライサーを追加します。 // 「slicerHost」は、スライサーのDOMを追加しようとするdivです。 $("#slicerHost").append(slicer.getDOMElement()); ..... <div id="slicerHost" style="height: 300px; width: 50%"></div>

JavaScript

コードのコピー

// テーブルを作成します。
var dataSource = [
    { Name: "Bob", City: "NewYork", Birthday: "1968/6/8" },
    { Name: "Betty", City: "NewYork", Birthday: "1972/7/3" },
    { Name: "Alice", City: "Washington", Birthday: "2012/2/15" },
];
var table = activeSheet.tables.addFromDataSource("table1", 1, 1, dataSource);

var slicerData = table.getSlicerData();
// 項目スライサーを作成して、項目すライザーにデータを設定します。
var slicer = new GC.Spread.Sheets.Slicers.ItemSlicer("slicer", slicerData, "Name");
// DOMツリーに項目スライサーを追加します。
// 「slicerHost」は、スライサーのDOMを追加しようとするdivです。
$("#slicerHost").append(slicer.getDOMElement());
.....
<div id="slicerHost" style="height: 300px; width: 50%"></div>