バージョン

igPivotDataSelector の HTML ページへの追加

トピックの概要

目的

このトピックは、 HTML ページへ igPivotDataSelector™ コントロールを追加する方法について概念と詳しい手順の両方から説明します。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

  • Ignite UI for jQuery の概要: このトピックでは、Ignite UI for jQuery™ ライブラリの一般情報を提供します。

  • Ignite UI for jQuery で JavaScript リソースを使用: このトピックでは、必要な JavaScript リソースを追加して Ignite UI for jQuery ライブラリからコントロールを使用する場合の全般的な説明をします。

  • igPivotDataSelector の概要: このトピックは、主要機能、最小要件およびユーザー機能性など、igPivotDataSelector コントロールに関する概念的な情報を提供します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

igPivotDataSelector の追加 - 概要

igPivotDataSelector 追加の概要

igPivotDataSelector は、igOlapFlatDataSource™ または igOlapXmlaDataSource™ のインスタンスを使用して操作します。したがって、igPivotDataSelector を HTML ページに追加する場合、内部で作成できるように、事前に構成されたデータ ソース インスタンスを提供するか、必要なオプションを指定する必要があります。

データ ソースは、igPivotDataSelector の dataSource パラメーターまたは dataSourceOptions プロパティのいずれかを通して指定します。データ ソースの設定は、igPivotDataSelector の初期化時に唯一設定しなければならない強制オプションです。

要件

以下の表で、igPivotDataSelector コントロールの要件を簡単に説明します。

必要なリソース 説明 必要な作業
jQuery および jQuery UI JavaScript リソース Ignite UI for jQuery™ は、これらのフレームワークの最上位にビルドされます。 ページの <head> セクションで両方のライブラリにスクリプト参照を追加します。
Modernizr ライブラリ (オプション) Modernizr ライブラリは、ブラウザとデバイス機能を検出するために igPivotDataSelector で使用されます。これは強制ではありませんが、含まれないとコントロールは HTML 互換ブラウザーで標準のデスクトップ環境であるかのように振る舞います。 ページの <head> セクションでライブラリにスクリプト参照を追加します。
全般的な igPivotDataSelector JavaScript リソース Ignite UI for jQuery ライブラリの igPivotDataSelector 機能性は、いくつかのファイルに配布されます。必要なリソースは以下の方法で読み込むことができます。
  • (推奨) Infragistics Loader (igLoader) を使用します。ページ上に igLoader へのスクリプト参照を含めるのみです。
  • 必要なリソースを手動で読み込みます。以下の表にリストされる依存関係を使用する必要があります。
以下の表は、igPivotDataSelector コントロール関連の Ignite UI for jQuery ライブラリの依存関係を示します。これらのリソースは、リソースを手動で取り込むことを選択する場合は明示的に参照される必要があります (igLoader は使用しない)。
JavaScript リソース 説明
infragistics.util.js
infragistics.util.jquery.js 		Ignite UI for jQuery ユーティリティ
(条件付き- igOlapFlatDataSource を使用する場合) infragistics.datasource.js igDataSource™ コンポーネント
infragistics.olapflatdatasource.js または infragistics.olapxmladatasource.js データ ソース フレームワーク
infragistics.templating.js テンプレート エンジン (igTemplate™)
infragistics.ui.shared.js Ignite UI for jQuery 共有コード
infragistics.ui.scroll.js 内部仕様されるスクロール ヘルパー
infragistics.ui.combo.js コンボ ボックス コントロール (igCombo™)
infragistics.ui.tree.js igTree™ コントロール
infragistics.ui.pivot.shared.js ピボット コンポーネント用の Ignite UI for jQuery 共有コード
infragistics.ui.pivotdataselector.js igPivotDataSelector™ コントロール

以下のいずれかを追加します。
  • igLoader への参照
  • すべての必要な JavaScript ファイルへの参照 (左側の表に一覧表示)
IG テーマ (オプション) このテーマには、Ignite UI for jQuery ライブラリ用のビジュアル スタイルが含まれます。テーマ ファイル:
  • <IG CSS root>/themes/Infragistics/infragistics.theme.css
igPivotDataSelector CSS リソース ファイル 以下の CSS ファイルからのスタイルは、コントロールの各種要素のレンダリングに使用されます。
  • <IG CSS root>/structure/modules/infragistics.ui.shared.css
  • <IG CSS root>/structure/modules/infragistics.ui.combo.css
  • <IG CSS root>/structure/modules/infragistics.ui.tree.css
  • <IG CSS root>/structure/modules/infragistics.ui.pivot.css
 ページのファイルにスタイル参照を追加します。

手順

igPivotDataSelector を HTML ページへ追加するための一般的な手順をおおまかに示すと、次のようになります。

  1. 必要なリソースへの参照を追加する

  2. igPivotDataSelector で必要な HTML マークアップを追加

  3. データ ソースを追加する

  4. igPivotDataSelector を初期化する

igPivotDataSelector の追加 - 手順

概要

以下のプロシージャは、Adventure Works サンプル データベースをビジュアル化する HTML アプリケーションに igPivotDataSelector コンポーネントを追加する方法をコード例を用いて説明します。プロシージャは Infragistics Loader (igLoader) を使用して、推奨オプションである必要なリソースを参照します。

プレビュー

以下のスクリーンショットは最終結果のプレビューです。

前提条件

この手順を実行するには、以下のリソースが必要です。

  • Adventure Works サンプル データベース
  • $.ig.OlapXmlaDataSource オブジェクトまたは $.ig.OlapFlatDataSource オブジェクトのインスタンス

概要

  1. 必要なリソースへの参照を追加する

  2. igPivotDataSelector で必要な HTML マークアップを追加

  3. データ ソースを追加する

  4. igPivotDataSelector を初期化する

手順

以下の手順では、jQuery igPivotDataSelector を初期化する方法を紹介します。

  1. 必要なリソースへの参照を追加します。

    1. 必要なファイルを構造化します。

      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 リソースの使用」 トピックを参照)。

    2. 必要な 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>

    3. igLoader への参照を追加します。ページ内に igLoader スクリプトを含めます。

      HTML の場合:

      <script  type="text/javascript" src="Scripts/ig/infragistics.loader.js"></script>

    4. 必要なリソースをロードします。

      igLoader をインスタンス化します。

      HTML の場合:

       <script type="text/javascript">
     $.ig.loader({
         scriptPath: "Scripts/ig/",
         cssPath: "Content/ig/",
         resources: “igPivotDataSelector,igOlapXmlaDataSource"
     });
 <script>

  2. igPivotDataSelector で必要な HTML マークアップを追加します。

    HTML ページに “dataSelector” の id で div タグを作成します。

    HTML の場合:

     <div id="dataSelector"></div>

  3. データ ソースを追加します。

    サンプル データ ソースの宣言:

    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;

  4. igPivotDataSelector を初期化する

    igPivotDataSelector を読み込むには、以下のコードを追加しなければなりません。

    JavaScript の場合:

     $("#dataSelector").igPivotDataSelector({
     dataSource: dataSource 
 });

    以下は、igPivotDataSelector の dataSourceOptionsプロパティを使用してデータ ソースを指定するオルタナティブな (直接の) 方法です。(「igPivotDataSelector 追加の概要」を参照)

    JavaScript の場合:

     $("#dataSelector").igPivotDataSelector({
       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]"     
         }
     });

関連コンテンツ

トピック

このトピックについては、以下のサンプルも参照してください。

サンプル

このトピックについては、以下のサンプルも参照してください。

オンラインで表示: GitHub