このトピックは、 HTML ページへ igPivotGrid
™ コントロールを追加する方法について概念と詳しい手順の両方から説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
Ignite UI for jQuery で JavaScript リソースを使用: このトピックは、必要な JavaScript リソースを追加して Ignite UI for jQuery ライブラリからコントロールを使用する場合の全般的なガイダンスを提供します。
igPivotGrid の概要: このトピックは、主要機能、最小要件、ユーザー機能性など、igPivotGrid
コントロールに関する概念的な情報を提供します。
このトピックは、以下のセクションで構成されます。
igPivotGrid
は、igOlapFlatDataSource
™ または igOlapXmlaDataSource
™ のコンポーネントを使用して操作します。したがって、igPivotGrid
を HTML ページに追加する場合、内部で作成できるように、事前に構成されたデータ ソース インスタンスを提供するか、必要なオプションを指定する必要があります。
データ ソースは、igPivotGrid
の dataSource パラメータまたは dataSourceOptions プロパティを介して指定します。データ ソースの設定は、igPivotGrid
の初期化時に唯一設定しなければならない強制オプションです。
以下の表で、igPivotGrid
コントロールの要件を簡単に説明します。
必要なリソース | 説明 | 必要な作業 | ||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
jQuery および jQuery UI JavaScript リソース | Ignite UI for jQuery™ は、以下のフレームワークの最上部にビルドされます。 | ページの <head> セクションで両方のライブラリにスクリプト参照を追加します。 | ||||||||||||||||||||||
Modernizr ライブラリ (オプション) | Modernizr ライブラリは、ブラウザとデバイス機能を検出するために igPivotGrid で使用されます。これは強制ではありませんが、含まれないとコントロールは HTML 互換ブラウザーで標準のデスクトップ環境であるかのように振る舞います。 | ページの <head> セクションでライブラリにスクリプト参照を追加します。 | ||||||||||||||||||||||
全般的な igPivotGrid JavaScript リソース
|
Ignite UI for jQuery ライブラリの igPivotGrid 機能性は、複数のファイルに渡って配布されます。必要なリソースは以下の方法で読み込むことができます。
igLoader は使用しない)。
|
以下のいずれかを追加します。
|
||||||||||||||||||||||
IG テーマ (オプション) |
このテーマには、Ignite UI for jQuery ライブラリ用のビジュアル スタイルが含まれます。テーマ ファイル:
|
|||||||||||||||||||||||
igPivotGrid CSS resources file
|
以下の CSS ファイルからのスタイルは、コントロールの各種要素のレンダリングに使用されます。
|
ページのファイルにスタイル参照を追加します。 |
igPivotGrid
を HTML ページへ追加するための一般的な手順をおおまかに示すと、次のようになります。
必要なリソースへの参照の追加
igPivotGrid
により必要な HTML マークアップを追加します。
データ ソースを追加する
igPivotGrid
の初期化
以下のプロシージャは、Adventure Works サンプル データベースをビジュアル化する HTML アプリケーションに igPivotGrid
コントロールを追加する方法をコード例を用いてデモします。プロシージャは Infragistics Loader (igLoader
) を使用して、推奨オプションである必要なリソースを参照します。
以下のスクリーンショットは最終結果のプレビューです。
この手順を実行するには、以下のリソースが必要です。
$.ig.OlapXmlaDataSource
オブジェクトまたは $.ig.OlapFlatDataSource
オブジェクトのインスタンス必要なリソースへの参照の追加
igPivotGrid
により必要な HTML マークアップを追加します。
データ ソースを追加する
igPivotGrid
の初期化
以下の手順では、jQuery igPivotGrid
を初期化する方法を紹介します。
必要なリソースへの参照を追加します。
必要なファイルを構造化します。
A. jQuery、jQueryUI および Modernizr JavaScript のリソースを Web ページが置かれているディレクトリ内の Scripts という名前のフォルダーに追加します。
B. Content/ig という名前のフォルダーに Ignite UI for jQuery CSS ファイルを追加します (詳細は、Ignite UI for jQuery のスタイル設定とテーマ設定のトピックを参照してください)。
C. Ignite UI for jQuery JavaScript ファイルを Web サイト またはアプリケーション内の Scripts/ig という名前のフォルダーに追加します (詳細は 「Ignite UI for jQuery での JavaScript リソースの使用」 トピックを参照)。
必要な JavaScript ライブラリへの参照を追加します。
jQuery、jQuery UI および Modernizr ライブラリの参照をページの <head>
セクションに追加します。
HTML の場合:
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.js"></script>
<script type="text/javascript" src="Scripts/modernizr.js"></script>
igLoader
への参照を追加します。igLoader
スクリプトをページに含めます。
HTML の場合:
<script type="text/javascript" src="Scripts/ig/infragistics.loader.js"></script>
必要なリソースをロードします。
igLoader をインスタンス化します。
HTML の場合:
<script type="text/javascript">
igPivotGrid
により必要な HTML マークアップを追加します。
HTML ページに “pivotGrid
” の id
で table
タグを作成します。
HTML の場合:
<table id="pivotGrid"></table>
データ ソースを追加します。
データ ソース宣言を追加します。
JavaScript の場合:
$.ig.loader(function () {
var dataSource = new $.ig.OlapXmlaDataSource({
serverUrl: "http://sampledata.infragistics.com/olap/msmdpump.dll",
catalog: "Adventure Works DW Standard Edition",
cube: "Adventure Works",
measureGroup: "Internet Sales",
rows: "[Sales Territory].[Sales Territory]",
columns: "[Product].[Product Categories]",
measures: "[Measures].[Internet Order Count],[Measures].[Internet Gross Profit Margin]"
});
});
このデータ ソースを IE で正しく操作するには、データ ソース宣言を追加する前に、jQuery クロスオリジン要求のサポートを true に設定する必要があります。
JavaScript の場合:
$.support.cors = true;
igPivotGrid
を初期化します。
igPivotGrid
コントロールを初期化します。
JavaScript の場合:
$.ig.loader(function () {
// add data source declaration here
$("#pivotGrid").igPivotGrid({
dataSource: dataSource
});
});
以下は、igPivotDataSelector の dataSourceOptionsプロパティを使用してデータ ソースを指定するオルタナティブな (直接の) 方法です。(「igPivotGrid の追加のサマリー」を参照してください)
JavaScript の場合:
$("#pivotGrid").igPivotGrid({
dataSourceOptions: {
xmlaOptions:{
serverUrl: " http://sampledata.infragistics.com/olap/msmdpump.dll ",
catalog: "Adventure Works DW Standard Edition ",
cube: "Adventure Works",
measureGroup: "Internet Sales",
},
rows: "[Sales Territory].[Sales Territory]",
columns: "[Product].[Product Categories]",
measures: "[Measures].[Internet Order Count],[Measures].[Internet Gross Profit Margin]"
}});
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igPivotGrid
™ コントロールを追加する方法について説明します。このトピックについては、以下のサンプルも参照してください。
フラット データ ソースへのバインド: このサンプルでは、igPivotGrid
を igOlapFlatDataSource
にバインドし、データ選択のために igPivotDataSelector
を使用します。
XMLA データ ソースにバインド: このサンプルでは、igPivotGrid
を igOlapXmlaDataSource
にバインドし、選択のために igPivotDataSelector
を使用します。
オンラインで表示: GitHub