このトピックでは、igPivotGrid™ コントロールを構成する方法を説明します。
このトピックは、以下のセクションで構成されます。
次の表に、ピボット表にデータを表示するために定義する必要のある基本オプションを示します。
igPivotGrid の場合:
| オプション | 説明 |
|---|---|
| dataSource | $.ig.OlapXmlaDataSource または $.ig.OlapFlatDataSource のインスタンス。 |
$.ig.OlapXmlaDataSource コンポーネントは、msmdpump.dll HTTP データ プロバイダーで構成された Microsoft® SQL Server Analysis Services (SSAS) サーバーとのコミュニケーションを処理します。 関連する基本設定は次のとおりです。
| オプション | 説明 |
|---|---|
| serverUrl | XMLA サーバーの URL。 |
| catalog | カタログ名。 |
| cube | データ ソース内のキューブの名前。 |
| rows | コンマ (,) で区切られた階層名のリスト。これは、データ ソースの行の階層になります。 |
| columns | コンマ (,) で区切られた階層名のリスト。これは、データ ソースの列の階層になります。 |
| measures | コンマ (,) で区切られたメジャー名のリスト。これは、データ ソースのメジャーになります。 |
構成の例を示す次の基本サンプルを参照してください。
$.ig.OlapFlatDataSource コンポーネントは、フラットなデータ コレクション上で多次元の (OLAP のような) 解析を実行します。 関連する基本設定は次のとおりです。
OlapFlatDataSource の場合:
| オプション | 説明 | |
|---|---|---|
| dataSource | $.ig.DataSource が受け入れる有効なデータ ソース、または $.ig.DataSource 自体のインスタンスを指定します。 | |
| metadata | $ .ig.DataSource データの処理命令を含むオブジェクト。 | |
| metadata.cube | キューブの作成に使用されるメタデータ。 | |
| metadata.cube.measuresDimension | メジャーのルート ノードについての情報を提供するオブジェクト。 | |
| metadata.cube.dimensions | 次元メタデータ オブジェクトの配列。 | |
| rows | コンマ (,) で区切られた階層名のリスト。これは、データ ソースの行の階層になります。 | |
| columns | コンマ (,) で区切られた階層名のリスト。これは、データ ソースの列の階層になります。 | |
| measures | コンマ (,) で区切られたメジャー名のリスト。これは、データ ソースのメジャーになります。 |
構成の例を示す次の基本サンプルを参照してください。
次のセクションでは、カスタム シナリオを構成する方法を示します。
igPivotGridを使用すると、customMoveValidation 関数を指定できます。これにより、移動操作を許可するかどうかを指定できます。
以下のサンプルでは、PivotGrid の列にアイテムをドロップすることを禁止する方法を示します。また、名前に「Seller」が含まれる階層では、ピボット グリッドおよびデータ セレクターのドロップ領域へのドロップが無効になります。
次の手順では、igPivotGrid でカスタム要素のドラッグ アンド ドロップを実装する方法を示します。
Data-type 属性および data-name 属性を持つ要素を定義します。
データ型は、要素の型に設定する必要があります。次元、階層、メジャーまたはレベル。データ名は関連する値でなければなりません。 たとえば、
<div class="ui-igpivot-metadataitem ui-state-default ui-corner-all custom-draggable"
data-type="Hierarchy"
data-name="[Seller].[Seller]"><span>Hierarchy: Seller</span></div>
<div class="ui-igpivot-metadataitem ui-state-default ui-corner-all custom-draggable"
data-type="Measure"
data-name="[Measures].[UnitsSold]"><span>Measure: Units Sold</span></div>
jQuery UI のドラッグ可能なインタラクションを使用して、定義された要素をドラッグ可能にします。
このような例を示す次の基本サンプルを参照してください。
ピボットグリッド内のメンバーをコードで展開するには、expandTupleMember メソッドを使用できます。 以下のサンプルは、グリッドのデータ ソースが dataSourceInitialized イベントハンドラーで初期化された場合に、このメソッドを使用する方法を示します。
このトピックに関連する追加情報については、以下のトピックを参照してください。
igPivotGrid の HTML ページへの追加: このトピックは、igPivotGrid を HTML ページへ追加する方法を示します。
igPivotGrid の ASP.NET MVC アプリケーションへの追加: このトピックは、ASP.NET MVC アプリケーションへ igPivotGrid コントロールを追加する方法についての概念と詳しい手順を説明します。
このトピックについては、以下のサンプルも参照してください。
フラット データ ソースへのバインド: このサンプルでは、igPivotGrid を igOlapFlatDataSource にバインドする方法を説明します。データ選択で igPivotDataSelector が使用されています。
Ignite UI for MVC と XMLA データ ソースの使用: このサンプルでは、igOlapXmlaDataSourceで Ignite UI for MVC igPivotGrid を使用する方法を紹介します。
並べ替え: このサンプルでは、igPivotGrid の並べ替えを有効にし、初期化で特定のレベルに並べ替えを適用する方法を紹介します。
レイアウト モード: このサンプルでは、コンパクト列と行ヘッダーが有効または無効な場合の igPivotGrid のレイアウトを比較します。
オンラインで表示: GitHub